react-google-maps-api
react-google-maps-api copied to clipboard
JustFly1984
Map not rendering markers / anything on initial load with React 18 and StrictMode
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.
Apparently the solution is to use the functional <MarkerF /> component instead c.f. https://github.com/JustFly1984/react-google-maps-api/issues/3064#issuecomment-1204181476.
For me 'MarkerClustererF' is not working properly with React 18 + strict mode
@YairoR I got this working by using <MarkerClusterF> and also adding a conditional render once the data is loaded, as suggested here:
https://github.com/JustFly1984/react-google-maps-api/issues/3064#issuecomment-1340077119
I have this issue by using simple marker and it does not work, it works only when strictmode is off.
I replaced Marker and Polyline with MarkerF and PolylineF, and it solved it for me
