React Google maps clusterer not working with dynamic marker data

[sebastian-meckovski]

I didn't get any response on my StackOverflow post so I decided to post here.

I'm using this example, the only difference is that my dataset is not static, it can change and the markers are re-rendered.

It works only as long as the new markers passed to the clusterer are not intersecting with the already existing markers. So let's say we have a dataset of three items [1, 2, 3]. If we update the marker state data to [4, 5, 6] it handles it fine. But if update it to something like [2, 3, 4] it will throw ReactJS: Maximum update depth exceeded error because at least one item in this collection is present in the already existing marker dataset.

Here is the reproduction of this on a React TS boilerplate npx create-react-app my-app --template typescript:

// index.tsx
import React, { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom/client";
import {
  AdvancedMarker,
  Map,
  useMap,
  APIProvider,
} from "@vis.gl/react-google-maps";
import { Marker, MarkerClusterer } from "@googlemaps/markerclusterer";

const rootElement = document.getElementById("root")!;
const root = ReactDOM.createRoot(rootElement);

const App = () => {
  const [trainingSpotsLocationData, setTrainingSpotsLocationData] = useState<
    IMapMarkers[]
  >([]);

  const dataset1 = [
    { id: "4a49d262", posX: 19.03565563713926, posY: 47.50797104332087 },
    { id: "3a432f12", posX: 19.03165563793341, posY: 47.50797104332977 },
  ];
  const dataset2 = [
    { id: "28546515", posX: 18.913425585937492, posY: 47.51137228850743 },
    { id: "411bb9e5", posX: 18.675846240234367, posY: 47.46621059365244 },
    { id: "f832f6f1", posX: 18.579715869140617, posY: 47.478278133922885 },
  ];

  // dataset3 is a superset of of dataset2. We can switch between dataset1 and dataset2 
  // without any issues, but becasue dataset3 contains items that were present in dataset1
  // or dataset2 the clusterer breaks
  const dataset3 = [
    { id: "4a49d262", posX: 19.03565563713926, posY: 47.50797104332087 },
    { id: "3a432f12", posX: 19.03165563793341, posY: 47.50797104332977 },
    { id: "28546515", posX: 18.913425585937492, posY: 47.51137228850743 },
    { id: "411bb9e5", posX: 18.675846240234367, posY: 47.46621059365244 },
    { id: "f832f6f1", posX: 18.579715869140617, posY: 47.478278133922885 },
  ];

  return (
    <>
      <button
        onClick={() => {
          setTrainingSpotsLocationData(dataset1);
        }}
      >
        Load dataset1
      </button>
      <button
        onClick={() => {
          setTrainingSpotsLocationData(dataset2);
        }}
      >
        Load dataset2
      </button>
      <button
        onClick={() => {
          setTrainingSpotsLocationData(dataset3);
        }}
      >
        Load dataset3
      </button>
      <APIProvider apiKey={"Your API key"}>
        <Map
          mapId={"Your map ID"}
          style={{ width: "500px", height: "500px" }}
          defaultCenter={{ lng: 19.0947, lat: 47.5636 }}
          zoomControl={true}
          defaultZoom={8}
          minZoom={1}
          disableDefaultUI={true}
        >
          <Markers coords={trainingSpotsLocationData} />
        </Map>
      </APIProvider>
    </>
  );
};

export interface IMapMarkers {
  id: string;
  posX: number;
  posY: number;
}

export interface ImarkerProps {
  coords: IMapMarkers[];
}

const Markers = ({ coords }: ImarkerProps) => {
  const map = useMap();
  const [markers, setMarkers] = useState<{ [key: string]: any }>({});
  const clusterer = useRef<MarkerClusterer | null>(null);

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

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

  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 if (!marker) {
        const newMarkers = { ...prev };
        delete newMarkers[key];
        return newMarkers;
      }
    });
  };

  return (
    <>
      {coords.map((x) => {
        return (
          <AdvancedMarker
            position={{ lng: x.posX, lat: x.posY }}
            key={x.id}
            ref={(marker) => setMarkerRef(marker, x.id)}
          ></AdvancedMarker>
        );
      })}
    </>
  );
};

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

packages used:

"@googlemaps/markerclusterer": "^2.5.3",
"@vis.gl/react-google-maps": "^1.0.0"

Here is my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

The reason I want to make it work like this is because my API is querying markers by a geohash + 8 nearest neighbours. So if I query by a neighbouring geohash, my the new returned data set will contain some markers that were already loaded in the previous query. So the client should ignore those. The animation below describes the desired workflow (minus the marker clusterer)

But if I implement the clusterer, it then breaks:

Notice that it only breaks if the loaded data is intersecting with the already loaded makers.

Not sure if this is a bug or something wrong with my implementation.

Is there a way to make the Marker Clusterer work with dynamic data set, where new data passed to the clusterer might contain markers that were already loaded in the previous service call?