diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx index 0a305c42272f..2e304bb0214b 100644 --- a/src/components/MapView/MapView.tsx +++ b/src/components/MapView/MapView.tsx @@ -1,7 +1,7 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native'; import type {MapState} from '@rnmapbox/maps'; import Mapbox, {MarkerView, setAccessToken} from '@rnmapbox/maps'; -import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; +import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -30,7 +30,7 @@ const MapView = forwardRef( const cameraRef = useRef(null); const [isIdle, setIsIdle] = useState(false); - const initialLocation = initialState && {longitude: initialState.location[0], latitude: initialState.location[1]}; + const initialLocation = useMemo(() => initialState && {longitude: initialState.location[0], latitude: initialState.location[1]}, [initialState]); const [currentPosition, setCurrentPosition] = useState(cachedUserLocation ?? initialLocation); const [userInteractedWithMap, setUserInteractedWithMap] = useState(false); const shouldInitializeCurrentPosition = useRef(true); diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx index 21ebace6c307..f59463442ac8 100644 --- a/src/components/MapView/MapView.website.tsx +++ b/src/components/MapView/MapView.website.tsx @@ -5,7 +5,7 @@ import {useFocusEffect} from '@react-navigation/native'; import mapboxgl from 'mapbox-gl'; import 'mapbox-gl/dist/mapbox-gl.css'; -import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; +import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import type {MapRef} from 'react-map-gl'; import Map, {Marker} from 'react-map-gl'; import {View} from 'react-native'; @@ -52,7 +52,7 @@ const MapView = forwardRef( const StyleUtils = useStyleUtils(); const [mapRef, setMapRef] = useState(null); - const initialLocation = {longitude: initialState.location[0], latitude: initialState.location[1]}; + const initialLocation = useMemo(() => ({longitude: initialState.location[0], latitude: initialState.location[1]}), [initialState]); const [currentPosition, setCurrentPosition] = useState(cachedUserLocation ?? initialLocation); const [userInteractedWithMap, setUserInteractedWithMap] = useState(false); const [shouldResetBoundaries, setShouldResetBoundaries] = useState(false);