Maximum update depth exceeded when running the same code as in the InfoWindow example

[mfmanca2000]

Hello,

I'm a victim of the "Maximum update depth exceeded" error when including the code of the Clustering example into my application.

The issue is that in the rendering of the Markers component there's the need to call the setMarkerRef function that in turn calls the setMarkers to change the state of the markers, thing that generates a call to useEffect that will restart the rendering... and I find myself in an infinite loop.

From the example at https://codesandbox.io/p/devbox/github/visgl/react-google-maps/tree/main/examples/marker-clustering in the app.tsx file

...
// Update markers
  useEffect(() => {
    clusterer.current?.clearMarkers();
    clusterer.current?.addMarkers(Object.values(markers));
  }, [markers]);

  const setMarkerRef = (marker: Marker | null, key: string) => {
    if (marker && markers[key]) return;
    if (!marker && !markers[key]) return;

    setMarkers(prev => {
      if (marker) {
        return {...prev, [key]: marker};
      } else {
        const newMarkers = {...prev};
        delete newMarkers[key];
        return newMarkers;
      }
    });
  };

  return (
    <>
      {points.map(point => (
        <AdvancedMarker
          position={point}
          key={point.key}
          ref={marker => setMarkerRef(marker, point.key)}> 
          <span className="tree">🌳</span>
        </AdvancedMarker>
      ))}
    </>
  );

...

The issue doesn't always appear but it happens quite often if I add some filtering to the markers (i.e. a textbox to search through the titles of the markers) and the stack trace is quite clear...

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
at checkForNestedUpdates (http://localhost:5173/node_modules/.vite/deps/chunk-UZGXFWLD.js?v=6b3ea6c9:19655:19)
at scheduleUpdateOnFiber (http://localhost:5173/node_modules/.vite/deps/chunk-UZGXFWLD.js?v=6b3ea6c9:18529:11)
at dispatchSetState (http://localhost:5173/node_modules/.vite/deps/chunk-UZGXFWLD.js?v=6b3ea6c9:13026:15)
at setMarkerRef (http://localhost:5173/src/components/Markers.jsx?t=1706516977171:51:5)
at ref (http://localhost:5173/src/components/Markers.jsx?t=1706516977171:68:28)
at refObject (http://localhost:5173/node_modules/.vite/deps/chunk-UZGXFWLD.js?v=6b3ea6c9:12749:15)
at safelyCallDestroy (http://localhost:5173/node_modules/.vite/deps/chunk-UZGXFWLD.js?v=6b3ea6c9:16737:13)
at commitHookEffectListUnmount (http://localhost:5173/node_modules/.vite/deps/chunk-UZGXFWLD.js?v=6b3ea6c9:16864:19)
at commitMutationEffectsOnFiber (http://localhost:5173/node_modules/.vite/deps/chunk-UZGXFWLD.js?v=6b3ea6c9:17707:21)
at recursivelyTraverseMutationEffects (http://localhost:5173/node_modules/.vite/deps/chunk-UZGXFWLD.js?v=6b3ea6c9:17681:15)

Has anyone else foudn himself in the same situation ?

[JensenMPillay]

I'm not sure if you still have this error, but having encountered the same issue, I found a slightly simpler way to manage cluster markers:

For example, if filteredPoints is your new array of filtered points:

• Whenever filteredPoints changes, you can clear all markers from the clusterer:

useEffect(() => {
  clusterer.current?.clearMarkers();
}, [filteredPoints]);

• Then you can add the markers one by one each time the component is rendered by mapping over filteredPoints:

{filteredPoints.map(point => (
    <AdvancedMarker
      position={point}
      key={point.key}
      ref={marker => marker && clusterer.current?.addMarker(marker)}> 
      <span className="tree">🌳</span>
    </AdvancedMarker>
))}

I hope this can be useful to someone facing the same issue.

[LouayJebran]

I am currently running into the same problem.

Noticed that this error only occurs when adding new pins (or re-adding the pins back after filtering them out).

Thanks for the solution @JensenMPillay, but it doesn't seem to work until the map updates once
when I pan or zoom for example the clutters are displayed.
can you please provide a full example?

here is what I currently have

export const CustomMarkers = ({ locations, setZoom, markerClick }: CustomMarkersProps) => {
    const map = useMap();
    const [markers, setMarkers] = React.useState<{ [key: string]: Marker }>({});
    const clusterer = React.useRef<MarkerClusterer | null>(null);

    React.useEffect(() => {
        if (!map) return;
        if (!clusterer.current) {
            clusterer.current = new MarkerClusterer({ map });
        }
    }, [map]);

    React.useEffect(() => {
        clusterer.current?.clearMarkers();
    }, [locations]);

    return (
        <>
            {locations && locations.map((location => (
                <AdvancedMarker key={location.address.latitude + "," + location.address.longitude} position={{ lat: location.address.latitude, lng: location.address.longitude }}
                    onClick={() => markerClick(location)} ref={(marker: Marker) => marker && clusterer.current?.addMarker(marker)}> 
                    <Pin
                        background={location.tag && location.tag.color ? '#' + location.tag.color : "#FF463C"}
                        borderColor={location.tag && location.tag.color ? '#' + location.tag.color : "#FF463C"}
                        glyphColor={location.tag && location.tag.color ? '#' + location.tag.color : "#FF463C"}
                        scale={1.4} >
                    </Pin>
                </AdvancedMarker>
            )))}
        </>
    );
};

[JensenMPillay]

Indeed, this solution wasn't very optimized.

To simplify the usage of clusterer and associated markers, I believe it would be preferable to create a separate component for each marker.

Here's a solution that seems viable to me:

export const CustomMarkers = ({ locations, setZoom, markerClick }: CustomMarkersProps) => {
    const map = useMap();
    /* 
    // This becomes useless 🧹 
    const [markers, setMarkers] = React.useState<{ [key: string]: Marker }>({});
    */
    const clusterer = React.useRef<MarkerClusterer | null>(null);

    React.useEffect(() => {
        if (!map) return;
        if (!clusterer.current) {
            clusterer.current = new MarkerClusterer({ map });
        }
    }, [map]);

    /*
    // This becomes useless 🧹
    React.useEffect(() => {
        clusterer.current?.clearMarkers();
    }, [locations]);
    */

    return (
        <>
            {locations && locations.map((location => (
                <CustomMarker key={location.address.latitude + "," + location.address.longitude} location={location} clusterer={clusterer.current} onClickHandler={() => markerClick(location)} />
            )))}
        </>
    );
};

And the component with useAdvancedMarkerRef hook:

type CustomMarkerProps = {
    key: string;
    location: Location;
    clusterer: MarkerClusterer | null;
    onClickHandler: () => void;
};

const CustomMarker = ({ key, location, clusterer, onClickHandler }: CustomMarkerProps) => {
  // Marker Ref
  const [refCallback, marker] = useAdvancedMarkerRef();

  React.useEffect(() => {
    if (!clusterer || !marker) return;
    clusterer.addMarker(marker);

    return () => {
      clusterer.removeMarker(marker);
    };
  }, [clusterer, marker]);

  return (
    <AdvancedMarker
      position={{ lat: location.address.latitude, lng: location.address.longitude }}
      key={key}
      ref={refCallback}
      gmpClickable
      onClick={onClickHandler}
    >
        <Pin
            background={location.tag && location.tag.color ? '#' + location.tag.color : "#FF463C"}
            borderColor={location.tag && location.tag.color ? '#' + location.tag.color : "#FF463C"}
            glyphColor={location.tag && location.tag.color ? '#' + location.tag.color : "#FF463C"}
            scale={1.4} >
        </Pin>
    </AdvancedMarker>
  );
};

export default CustomMarker;

[LouayJebran]

works great!
thanks for the help

[sebastian-meckovski]

I tried your solution in my Sandbox Example and it seems to be working but once I have more that 100 markers the performance starts to decline. It works much faster if I remove the clusterer, but there are too many markers on the map and it doesn't look pretty. Is it possible to optimize it for a better performance? I've been trying to optimize it for hours and struggling with it.

The example above simulates the following scenario:

A situation where some new markers loaded can contain some already loaded from the previous call.

I tried the official solution at first and it's efficient but it breaks when new items loaded duplicate with the already pre-loaded ones.

Can anyone help?