@page-speed/maps 0.2.1 → 0.2.3

package/dist/components/geo-map.js

@@ -874,9 +874,16 @@ function GeoMap({
     const updateDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
-        setContainerDimensions({
-          width: rect.width || 800,
-          height: rect.height || calculatedHeight
+        setContainerDimensions((prev) => {
+          const newWidth = rect.width || 800;
+          const newHeight = rect.height || calculatedHeight;
+          if (prev.width === newWidth && prev.height === newHeight) {
+            return prev;
+          }
+          return {
+            width: newWidth,
+            height: newHeight
+          };
         });
       }
     };
@@ -1013,17 +1020,41 @@ function GeoMap({
   const [dynamicPanelPosition, setDynamicPanelPosition] = React3.useState(
     panelPosition
   );
+  const viewStateRef = React3.useRef(uncontrolledViewState);
   React3.useEffect(() => {
     if (!viewState && !defaultViewState) {
-      setUncontrolledViewState({
-        latitude: firstCoordinate.latitude,
-        longitude: firstCoordinate.longitude,
-        zoom: calculatedZoom
+      setUncontrolledViewState((prev) => {
+        if (prev.latitude === firstCoordinate.latitude && prev.longitude === firstCoordinate.longitude && prev.zoom === calculatedZoom) {
+          return prev;
+        }
+        return {
+          latitude: firstCoordinate.latitude,
+          longitude: firstCoordinate.longitude,
+          zoom: calculatedZoom
+        };
       });
     }
-  }, [firstCoordinate, calculatedZoom, viewState, defaultViewState]);
+  }, [
+    // Use primitive values instead of objects to avoid reference changes
+    firstCoordinate.latitude,
+    firstCoordinate.longitude,
+    calculatedZoom,
+    viewState,
+    defaultViewState
+  ]);
   const isControlledViewState = viewState !== void 0;
   const resolvedViewState = isControlledViewState ? viewState : uncontrolledViewState;
+  React3.useEffect(() => {
+    viewStateRef.current = resolvedViewState || uncontrolledViewState;
+  }, [
+    // Use primitive values to avoid reference changes
+    resolvedViewState?.latitude,
+    resolvedViewState?.longitude,
+    resolvedViewState?.zoom,
+    uncontrolledViewState.latitude,
+    uncontrolledViewState.longitude,
+    uncontrolledViewState.zoom
+  ]);
   const applyViewState = React3.useCallback(
     (nextState) => {
       if (!isControlledViewState) {
@@ -1062,7 +1093,13 @@ function GeoMap({
       setSelection({ type: "none" });
       onSelectionChange?.({ type: "none" });
     }
-  }, [onSelectionChange, selectedMarker, selection]);
+  }, [
+    // Use primitive values to avoid object reference issues
+    selection.type,
+    selection.markerId,
+    selectedMarker?.id,
+    onSelectionChange
+  ]);
   const emitSelectionChange = React3.useCallback(
     (nextSelection) => {
       if (nextSelection.type === "none") {
@@ -1092,17 +1129,15 @@ function GeoMap({
         markerId: marker.id,
         clusterId: marker.clusterId
       });
-      const currentCenter = resolvedViewState || {
-        latitude: firstCoordinate.latitude,
-        longitude: firstCoordinate.longitude
+      const currentState = viewStateRef.current;
+      const center = {
+        latitude: currentState.latitude ?? 0,
+        longitude: currentState.longitude ?? 0
       };
       const optimalPosition = getOptimalPanelPosition(
         marker.latitude,
         marker.longitude,
-        {
-          latitude: currentCenter.latitude ?? firstCoordinate.latitude,
-          longitude: currentCenter.longitude ?? firstCoordinate.longitude
-        }
+        center
       );
       setDynamicPanelPosition(optimalPosition);
       applyViewState({
@@ -1112,7 +1147,7 @@ function GeoMap({
       });
       emitSelectionChange({ type: "marker", marker });
     },
-    [applyViewState, emitSelectionChange, markerFocusZoom, resolvedViewState, firstCoordinate]
+    [applyViewState, emitSelectionChange, markerFocusZoom]
   );
   const selectCluster = React3.useCallback(
     (cluster) => {
@@ -1120,17 +1155,15 @@ function GeoMap({
         type: "cluster",
         clusterId: cluster.id
       });
-      const currentCenter = resolvedViewState || {
-        latitude: firstCoordinate.latitude,
-        longitude: firstCoordinate.longitude
+      const currentState = viewStateRef.current;
+      const center = {
+        latitude: currentState.latitude ?? 0,
+        longitude: currentState.longitude ?? 0
       };
       const optimalPosition = getOptimalPanelPosition(
         cluster.latitude,
         cluster.longitude,
-        {
-          latitude: currentCenter.latitude ?? firstCoordinate.latitude,
-          longitude: currentCenter.longitude ?? firstCoordinate.longitude
-        }
+        center
       );
       setDynamicPanelPosition(optimalPosition);
       applyViewState({
@@ -1140,7 +1173,7 @@ function GeoMap({
       });
       emitSelectionChange({ type: "cluster", cluster });
     },
-    [applyViewState, clusterFocusZoom, emitSelectionChange, resolvedViewState, firstCoordinate]
+    [applyViewState, clusterFocusZoom, emitSelectionChange]
   );
   const clearSelection = React3.useCallback(() => {
     setSelection({ type: "none" });