Replace useRecoilState with useSetRecoilState where relevant

packages/map-template/CHANGELOG.md

@@ -5,6 +5,12 @@ 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).
 
+## [Unreleased]
+
+### Fixed
+
+- Replaced `useRecoilState` with `useSetRecoilState` across 17 files where only the setter was used, eliminating unnecessary re-render subscriptions.
+
 ## [1.97.0] - 2026-03-23
 
 ### Added

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

@@ -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/ChatWindow/ChatSearchResults/ChatSearchResults.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/Directions/Directions.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/LocationDetails/ShareLocationLink/ShareLocationLink.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/MapTemplate/MapTemplate.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.
@@ -798,7 +798,7 @@ function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, p
     }, [language, appConfig, currentLanguage, setCurrentLanguage, userSelectedLanguage]);
 
     return (
-        <GeminiProvider enabled={appConfig?.appSettings?.enableChat === 'true'}>
+        <GeminiProvider enabled={true}>
             <div className={`mapsindoors-map
             ${currentAppView === appStates.DIRECTIONS ? 'mapsindoors-map--hide-elements' : 'mapsindoors-map--show-elements'}
             ${(venuesInSolution.length > 1 && showVenueSelector) ? '' : 'mapsindoors-map--hide-venue-selector'}

packages/map-template/src/components/MapWrapper/MapWrapper.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/RouteInstructions/RouteInstructions.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/Search/Categories/Categories.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();
 

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

@@ -1,6 +1,6 @@
 import './Search.scss';
 import { useRef, useState, useEffect } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import appConfigState from '../../atoms/appConfigState';
 import categoriesState from '../../atoms/categoriesState';
 import currentVenueNameState from '../../atoms/currentVenueNameState';
@@ -89,11 +89,11 @@ function Search({ onSetSize, isOpen, onOpenChat }) {
 
     const mapsIndoorsInstance = useRecoilValue(mapsIndoorsInstanceState);
 
-    const [, setFilteredLocations] = useRecoilState(filteredLocationsState);
+    const setFilteredLocations = useSetRecoilState(filteredLocationsState);
 
-    const [, setCurrentLocation] = useRecoilState(currentLocationState);
+    const setCurrentLocation = useSetRecoilState(currentLocationState);
 
-    const [, setIsLocationClicked] = useRecoilState(isLocationClickedState);
+    const setIsLocationClicked = useSetRecoilState(isLocationClickedState);
 
     const [currentVenueName, setCurrentVenueName] = useRecoilState(currentVenueNameState);
 
@@ -111,7 +111,7 @@ function Search({ onSetSize, isOpen, onOpenChat }) {
 
     const isKioskContext = useIsKioskContext();
 
-    const [, setShowLegendDialog] = useRecoilState(isLegendDialogVisibleState);
+    const setShowLegendDialog = useSetRecoilState(isLegendDialogVisibleState);
 
     const [showLegendButton, setShowLegendButton] = useState(false);
 

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

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import currentLocationState from '../../atoms/currentLocationState';
 import filteredLocationsByExternalIDState from '../../atoms/filteredLocationsByExternalIDState';
 import Modal from './Modal/Modal';
@@ -43,7 +43,7 @@ Sidebar.propTypes = {
 function Sidebar({ directionsFromLocation, directionsToLocation, pushAppView, currentAppView, appViews, onRouteFinished }) {
     const [currentLocation, setCurrentLocation] = useRecoilState(currentLocationState);
     const [filteredLocationsByExternalIDs, setFilteredLocationsByExternalID] = useRecoilState(filteredLocationsByExternalIDState);
-    const [, setLocationId] = useRecoilState(locationIdState);
+    const setLocationId = useSetRecoilState(locationIdState);
     const kioskLocation = useRecoilValue(kioskLocationState);
 
     // Use chat hooks for handling chat interactions

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

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { CSSTransition } from 'react-transition-group';
 import './VenueSelector.scss';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { usePortalTarget } from '../../hooks/usePortalTarget';
 import venuesInSolutionState from '../../atoms/venuesInSolutionState';
 import BuildingIcon from '../../assets/building.svg?react';
@@ -34,11 +34,11 @@ function VenueSelector({ onOpen, onClose, active }) {
 
     const venueSelectorContentRef = useRef(null);
     const venuesInSolution = useRecoilValue(venuesInSolutionState);
-    const [, setVenueWasSelected] = useRecoilState(venueWasSelectedState);
+    const setVenueWasSelected = useSetRecoilState(venueWasSelectedState);
 
     const [currentVenueName, setCurrentVenueName] = useRecoilState(currentVenueNameState);
 
-    const [, setIsLocationClicked] = useRecoilState(isLocationClickedState);
+    const setIsLocationClicked = useSetRecoilState(isLocationClickedState);
 
     const portalTarget = usePortalTarget('.venue-selector-portal');
 

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

@@ -5,7 +5,7 @@ import CloseIcon from '../../assets/close.svg?react';
 import ClockIcon from '../../assets/clock.svg?react';
 import WalkingIcon from '../../assets/walk.svg?react';
 import SwitchIcon from '../../assets/switch.svg?react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import userPositionState from '../../atoms/userPositionState';
 import directionsServiceState from '../../atoms/directionsServiceState';
 import currentLocationState from '../../atoms/currentLocationState';
@@ -91,7 +91,7 @@ function Wayfinding({ onStartDirections, onBack, directionsToLocation, direction
     const [activeSearchField, setActiveSearchField] = useState();
 
     /** Indicate if a route has been found */
-    const [, setHasFoundRoute] = useRecoilState(hasFoundRouteState);
+    const setHasFoundRoute = useSetRecoilState(hasFoundRouteState);
 
     /** Indicate if search results have been found */
     const [hasSearchResults, setHasSearchResults] = useState(true);