Merge pull request #664 from MapsPeople/fix/use-set-recoil-state

Replace useRecoilState with useSetRecoilState where relevant

Author: Lucaci-Andrei

package-lock.json

@@ -5,7 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.97.0] - 2026-03-23
+## [1.96.15] - 2026-03-24
+
+### Fixed
+
+- Replaced `useRecoilState` with `useSetRecoilState` across 17 files where only the setter was used, eliminating unnecessary re-render subscriptions.
+
+## [1.96.14] - 2026-03-23
 
 ### Added
 

packages/map-template/CHANGELOG.md

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { useState } from 'react';
 import { ContainerContext } from './ContainerContext';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 import currentLocationState from '../../atoms/currentLocationState';
 import filteredLocationsByExternalIDState from '../../atoms/filteredLocationsByExternalIDState';
 import Sheet from './Sheet/Sheet';
@@ -62,7 +62,7 @@ function BottomSheet({ directionsFromLocation, directionsToLocation, pushAppView
 
     const [filteredLocationsByExternalIDs, setFilteredLocationsByExternalID] = useRecoilState(filteredLocationsByExternalIDState);
 
-    const [, setLocationId] = useRecoilState(locationIdState);
+    const setLocationId = useSetRecoilState(locationIdState);
 
     /*
      * React on changes on the current location and directions locations and set relevant bottom sheet.

packages/map-template/src/components/BottomSheet/BottomSheet.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import './ChatSearchResults.scss';
 import PropTypes from 'prop-types';
 import ListItemLocation from '../../WebComponentWrappers/ListItemLocation/ListItemLocation';
@@ -25,8 +25,8 @@ const ChatSearchResults = ({ locations }) => {
     const [hoveredLocationId, setHoveredLocationId] = useState(null);
 
     // Recoil state for location handling
-    const [, setCurrentLocation] = useRecoilState(currentLocationState);
-    const [, setIsLocationClicked] = useRecoilState(isLocationClickedState);
+    const setCurrentLocation = useSetRecoilState(currentLocationState);
+    const setIsLocationClicked = useSetRecoilState(isLocationClickedState);
     const [currentVenueName, setCurrentVenueName] = useRecoilState(currentVenueNameState);
     const mapsIndoorsInstance = useRecoilValue(mapsIndoorsInstanceState);
     const isDesktop = useIsDesktop();

packages/map-template/src/components/ChatWindow/ChatSearchResults/ChatSearchResults.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useRef } from 'react';
 import './Directions.scss';
 import { useTranslation } from 'react-i18next';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import mapsIndoorsInstanceState from '../../atoms/mapsIndoorsInstanceState';
 import travelModeState from '../../atoms/travelModeState';
 import QRCode from '../../assets/qrcode.svg?react';
@@ -68,15 +68,15 @@ function Directions({ isOpen, onBack, onSetSize, onRouteFinished, snapPointSwipe
 
     const directions = useRecoilValue(directionsResponseState);
 
-    const [, setActiveStep] = useRecoilState(activeStepState);
+    const setActiveStep = useSetRecoilState(activeStepState);
 
     const [substepsOpen, setSubstepsOpen] = useRecoilState(substepsToggledState);
 
     const kioskLocation = useRecoilValue(kioskLocationState);
 
     const isDesktop = useIsDesktop();
 
-    const [, setQRCodeLink] = useRecoilState(qrCodeLinkState)
+    const setQRCodeLink = useSetRecoilState(qrCodeLinkState)
 
     const isDestinationStep = useRecoilValue(isDestinationStepState);
 

packages/map-template/src/components/Directions/Directions.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import ClickAwayListener from 'react-click-away-listener';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -36,7 +36,7 @@ function ShareLocationLink({ location, buttonClassName }) {
     const [showCopyButton, setShowCopyButton] = useState(false);
     const kioskLocation = useRecoilValue(kioskLocationState);
 
-    const [, setQrCodeLink] = useRecoilState(qrCodeLinkState);
+    const setQrCodeLink = useSetRecoilState(qrCodeLinkState);
 
     const isDesktop = useIsDesktop();
 

packages/map-template/src/components/LocationDetails/ShareLocationLink/ShareLocationLink.jsx

@@ -1,6 +1,6 @@
 import { Fragment, useEffect, useRef } from 'react';
 import { useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { defineCustomElements } from '@mapsindoors/components/dist/components/index.js';
 import i18n from 'i18next';
 import initI18n from '../../i18n/initialize.js';
@@ -146,37 +146,37 @@ function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, p
 
     const [userSelectedLanguage, setUserSelectedLanguage] = useState(false);
     const [mapOptions, setMapOptions] = useState({ brandingColor: primaryColor });
-    const [, setApiKey] = useRecoilState(apiKeyState);
-    const [, setGmApiKey] = useRecoilState(gmApiKeyState);
-    const [, setMapboxAccessToken] = useRecoilState(mapboxAccessTokenState);
+    const setApiKey = useSetRecoilState(apiKeyState);
+    const setGmApiKey = useSetRecoilState(gmApiKeyState);
+    const setMapboxAccessToken = useSetRecoilState(mapboxAccessTokenState);
     const [isMapReady, setMapReady] = useRecoilState(isMapReadyState);
     const [venuesInSolution, setVenuesInSolution] = useRecoilState(venuesInSolutionState);
     const [currentLocation, setCurrentLocation] = useRecoilState(currentLocationState);
     const categories = useRecoilValue(categoriesState);
-    const [, setLocationId] = useRecoilState(locationIdState);
+    const setLocationId = useSetRecoilState(locationIdState);
     const [color, setPrimaryColor] = useRecoilState(primaryColorState);
-    const [, setLogo] = useRecoilState(logoState);
-    const [, setGmMapId] = useRecoilState(gmMapIdState);
+    const setLogo = useSetRecoilState(logoState);
+    const setGmMapId = useSetRecoilState(gmMapIdState);
     const mapsIndoorsInstance = useRecoilValue(mapsIndoorsInstanceState);
     const [currentLanguage, setCurrentLanguage] = useRecoilState(languageState);
-    const [, setKioskLocation] = useRecoilState(kioskLocationState);
-    const [, setKioskOriginLocationId] = useRecoilState(kioskOriginLocationIdState);
-    const [, setTimeoutValue] = useRecoilState(timeoutState);
+    const setKioskLocation = useSetRecoilState(kioskLocationState);
+    const setKioskOriginLocationId = useSetRecoilState(kioskOriginLocationIdState);
+    const setTimeoutValue = useSetRecoilState(timeoutState);
     const isInactive = useInactive(); // Hook to detect if user is inactive. Used in combination with timeout prop to reset the Map Template to initial values after a specified time.
-    const [, setSupportsUrlParameters] = useRecoilState(supportsUrlParametersState);
-    const [, setUseKeyboard] = useRecoilState(useKeyboardState);
-    const [, setMiTransitionLevel] = useRecoilState(miTransitionLevelState);
-    const [, setSelectedCategory] = useRecoilState(selectedCategoryState);
-    const [, setSearchAllVenues] = useRecoilState(searchAllVenuesState);
-    const [, setCategory] = useRecoilState(categoryState);
-    const [, setHideNonMatches] = useRecoilState(hideNonMatchesState);
-    const [, setshowExternalIDs] = useRecoilState(showExternalIDsState);
-    const [, setShowRoadNames] = useRecoilState(showRoadNamesState);
-    const [, setSearchExternalLocations] = useRecoilState(searchExternalLocationsState);
-    const [, setCenter] = useRecoilState(centerState);
+    const setSupportsUrlParameters = useSetRecoilState(supportsUrlParametersState);
+    const setUseKeyboard = useSetRecoilState(useKeyboardState);
+    const setMiTransitionLevel = useSetRecoilState(miTransitionLevelState);
+    const setSelectedCategory = useSetRecoilState(selectedCategoryState);
+    const setSearchAllVenues = useSetRecoilState(searchAllVenuesState);
+    const setCategory = useSetRecoilState(categoryState);
+    const setHideNonMatches = useSetRecoilState(hideNonMatchesState);
+    const setshowExternalIDs = useSetRecoilState(showExternalIDsState);
+    const setShowRoadNames = useSetRecoilState(showRoadNamesState);
+    const setSearchExternalLocations = useSetRecoilState(searchExternalLocationsState);
+    const setCenter = useSetRecoilState(centerState);
     const [viewModeSwitchVisible, setViewModeSwitchVisible] = useState();
     const mapClickActionRef = useRef();
-    const [, setWayfindingLocation] = useRecoilState(wayfindingLocationState);
+    const setWayfindingLocation = useSetRecoilState(wayfindingLocationState);
     const qrCodeLink = useRecoilValue(qrCodeLinkState)
 
     const [showVenueSelector, setShowVenueSelector] = useState(true);
@@ -188,7 +188,7 @@ function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, p
     const [isMapPositionInvestigating, setIsMapPositionInvestigating] = useState(false);
 
     // The filtered locations by external id, if present.
-    const [, setFilteredLocationsByExternalID] = useRecoilState(filteredLocationsByExternalIDState);
+    const setFilteredLocationsByExternalID = useSetRecoilState(filteredLocationsByExternalIDState);
 
     // The filtered locations that the user sets when selecting a category/location.
     const [filteredLocations, setFilteredLocations] = useRecoilState(filteredLocationsState);
@@ -197,13 +197,13 @@ function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, p
     const [initialFilteredLocations, setInitialFilteredLocations] = useState();
 
     const [appConfig, setAppConfig] = useRecoilState(appConfigState);
-    const [, setSolution] = useRecoilState(solutionState);
+    const setSolution = useSetRecoilState(solutionState);
 
-    const [, setTileStyle] = useRecoilState(tileStyleState);
-    const [, setStartZoomLevel] = useRecoilState(startZoomLevelState);
+    const setTileStyle = useSetRecoilState(tileStyleState);
+    const setStartZoomLevel = useSetRecoilState(startZoomLevelState);
 
-    const [, setBearing] = useRecoilState(bearingState);
-    const [, setPitch] = useRecoilState(pitchState);
+    const setBearing = useSetRecoilState(bearingState);
+    const setPitch = useSetRecoilState(pitchState);
 
     const isDesktop = useIsDesktop();
     const resetState = useReset();
@@ -220,7 +220,7 @@ function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, p
     const [setCurrentVenueName, updateCategories] = useCurrentVenue();
 
     const finishRoute = useOnRouteFinished();
-    const [, setErrorMessage] = useRecoilState(notificationMessageState);
+    const setErrorMessage = useSetRecoilState(notificationMessageState);
 
     /**
      * Ensure that MapsIndoors Web SDK is available.

packages/map-template/src/components/MapTemplate/MapTemplate.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import MIMap from '../MIMap/MIMap';
 import { mapTypes } from '../../constants/mapTypes';
 import useLiveData from '../../hooks/useLivedata';
@@ -74,16 +74,16 @@ function MapWrapper({ onLocationClick, onMapPositionKnown, useMapProviderModule,
     const mapboxAccessToken = useRecoilValue(mapboxAccessTokenState);
     const [mapType, setMapType] = useRecoilState(mapTypeState);
     const [mapsIndoorsInstance, setMapsIndoorsInstance] = useRecoilState(mapsIndoorsInstanceState);
-    const [, setUserPosition] = useRecoilState(userPositionState);
-    const [, setDirectionsService] = useRecoilState(directionsServiceState);
+    const setUserPosition = useSetRecoilState(userPositionState);
+    const setDirectionsService = useSetRecoilState(directionsServiceState);
     const filteredLocations = useRecoilValue(filteredLocationsState);
     const filteredLocationsByExternalIDs = useRecoilValue(filteredLocationsByExternalIDState);
     const tileStyle = useRecoilValue(tileStyleState);
     const bearing = useRecoilValue(bearingState);
     const pitch = useRecoilValue(pitchState);
-    const [, setPositionControl] = useRecoilState(positionControlState);
+    const setPositionControl = useSetRecoilState(positionControlState);
     const solution = useRecoilValue(solutionState);
-    const [, setErrorMessage] = useRecoilState(notificationMessageState);
+    const setErrorMessage = useSetRecoilState(notificationMessageState);
     const hideNonMatches = useRecoilValue(hideNonMatchesState);
     const appConfig = useRecoilValue(appConfigState);
     const [isViewSelectorVisible, setIsViewSelectorVisible] = useState(false);

packages/map-template/src/components/MapWrapper/MapWrapper.jsx

@@ -3,7 +3,7 @@ import './RouteInstructions.scss';
 import { useTranslation } from 'react-i18next';
 import ArrowRight from '../../assets/arrow-right.svg?react';
 import ArrowLeft from '../../assets/arrow-left.svg?react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import directionsResponseState from '../../atoms/directionsResponseState';
 import activeStepState from '../../atoms/activeStep';
 import RouteInstructionsStep from '../WebComponentWrappers/RouteInstructionsStep/RouteInstructionsStep';
@@ -52,7 +52,7 @@ function RouteInstructions({ steps, onNextStep, onPreviousStep, originLocation,
 
     const substepsOpen = useRecoilValue(substepsToggledState);
 
-    const [, setIsDestinationStep] = useRecoilState(isDestinationStepState);
+    const setIsDestinationStep = useSetRecoilState(isDestinationStepState);
 
     const isKioskContext = useIsKioskContext();
 

packages/map-template/src/components/RouteInstructions/RouteInstructions.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import './Categories.scss';
 import categoriesState from '../../../atoms/categoriesState';
 import { snapPoints } from '../../../constants/snapPoints';
@@ -51,9 +51,9 @@ function Categories({ onSetSize, getFilteredLocations, searchFieldRef, isOpen, t
 
     const [selectedCategory, setSelectedCategory] = useRecoilState(selectedCategoryState);
 
-    const [, setSearchResults] = useRecoilState(searchResultsState);
+    const setSearchResults = useSetRecoilState(searchResultsState);
 
-    const [, setFilteredLocations] = useRecoilState(filteredLocationsState);
+    const setFilteredLocations = useSetRecoilState(filteredLocationsState);
 
     const scrollableContentSwipePrevent = usePreventSwipe();