MarkerClustererF does not work in Strictmode

[gerasimosgakis]

Issue template

You can donate or became a sponsor https://opencollective.com/react-google-maps-api#category-CONTRIBUTE

If you want to ask question, please ask it in Github Discussions, Spectrum.chat or Slack channel

Please do not post unformatted code into issues, and please do not ask questions. Only real issues, PR's or feature requests are allowed. Minimal reproduction in codesandbox.io is required.

Please provide an explanation of the issue

When using MarkerClustererF in Strict Mode - no markers or clusters are rendered.

Your Environment

os: windows

node --version: 20.3.2

react version: 18.2.0

@react-google-maps/api version: 2.18.1

How does it behave?

No clusters or markers are displayed on the map in strict mode.

How should it behave correctly?

Clusters and markers should be displayed on the map in strict mode

Basic implementation of incorrect behavior in codesandbox.com

https://codesandbox.io/s/gifted-joana-8wt3ld

[JustFly1984]

it is repeated issue. your PR is welcome.

[MarvinVrdoljak]

Having the same issue.

[jimjeffers]

I've gotten around this by waiting to render the clusterer after a timeout. This is obviously a hack but at least it works until this is resolved.

 const [isMounted, setIsMounted] = useState(false)
  useEffect(() => {
    if (isMounted || detectedLocations.length < 1) return
    setTimeout(() => {
      setIsMounted(true)
    }, 1000)
  }, [isMounted, detectedLocations, setIsMounted])

Then in the JSX:

   <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          zoom={zoom}
          options={options}
          onLoad={handleMapLoad}
        >
          {isMounted ? (
            <>
              <MarkerClustererF
                minimumClusterSize={10}
                styles={[
                  {
                    height: 80,
                    width: 80,
                    textColor: '#fff',
                    textSize: 13,
                    url: iconUrlForColor('#0059B3'),
                  },
                ]}
              >
              ...