Map not rendering markers / anything on initial load with React 18 and StrictMode

[burnedikt]

When using this library in a React 18 project and having StrictMode enabled, the map will not correctly render anything and it will attempt to load twice. This is likely due to the fact that StrictMode in React 18 now runs useEffect hooks twice during development, see docs.

Most likely, some of the useEffect hooks used don't have a perfect cleanup mechanism which leads to this issue.

The workaround is to disable StrictMode or to run the app in production (where StrictMode doesn't do anything).

Your Environment

"react-dom": "^18",
"@react-google-maps/api": "^2",

How does it behave?

Upon load, it shows the warning about a missing API key twice, instead of once and it does not render any marker (or presumably anything else)

How should it behave correctly?

It should show the warning about a missing API key once (or not at all if supplying one) and render markers or any other child elements as expected.

Basic implementation of incorrect behavior in codesandbox.com

This codesandbox renders the app once with, once without StrictMode and shows the different results:

https://codesandbox.io/s/youthful-smoke-wnmf17?file=/src/App.js

---

I assume StrictMode is also the root issue for some other issues here like #3064 or #3094 which are based on React 18+ and use StrictMode, presumably.