React 18 OverlayView Flickering

[Dastari]

When using the new createRoot render method in React 18 any components in the OverlayView will flicker and jump when panning the map.

Additionally the OverlayView components will not render on initial render (causing a re-render will trigger them to show)

@react-google-maps/api:v2.11.9 react:18.0

Repo to demonstrate using createRoot (note you have to change the number of rendered dots for it to trigger a re-render):

https://codesandbox.io/s/react-maps-api-overlay-v18-yqsfil

Repo showing it working when returning to the old v17 render method:

https://codesandbox.io/s/react-maps-api-overlay-v17-4qt0pl

[nicolasperalta-endava]

Hi, I have the same problem, have you fixed it? Its very annoying

[Dastari]

The problem appears to be caused by Automatic Batching. In the React v18 documentation it says that you can use flushSync to opt-out of Automatic Batching however I don't believe this is entirely correct as Automatic Batching still happens, you can just force a re-render when you want to.

I have attempted many variations of using flushSync using @sud977 approach in the google-maps-react thread, however the same issue occurs.

[becerriljc]

Hi, I have the same problem too.

[asdutoit]

I am also having the same issue

[manelio]

Same problem here

[ShadiBlitz]

https://codesandbox.io/s/react-maps-api-overlay-v17-4qt0pl

@Dastari how can I apply this workaround in next js ?

[JustFly1984]

use eslint with eslint plugins react react-hooks react-perf to reduce re-renders!

[ShadiBlitz]

@JustFly1984 What do you mean? Apparently there is an issue with react 18 and the overlayview is flickering!! We can't upgrade to react 18 because of this issue.

@Dastari @manelio @asdutoit @becerriljc @nicolasperalta-endava

[SashaMihalache]

Same problem happening to me

[RayPaez83]

I'm having the same issue when dragEnd in react-google-maps, the pins flickering, using the onDragEnd property you could set the lat and the lng again and recenter where you want to recenter the map.

[njho]

Same Issue!

[Owoscaw]

Still getting this issue

[QLeitz]

This is happening with me too. ~250 polygon features for countries on a world map and they all flicker every zoom in/out. I've confirmed this is not caused by re-renders of the map component by using the React profiler. Using react v18.2.0.

[lukas-hablitzel]

I had the same problem when using the OverlayView component. However replacing it with OverlayViewF, which is also exported from @react-google-maps/api resolved the issue for me. Just thought this might help someone else too.

[obsfx]

I had the same problem when using the OverlayView component. However replacing it with OverlayViewF, which is also exported from @react-google-maps/api resolved the issue for me. Just thought this might help someone else too.

This worked for me. Thanks a lot.

[JustFly1984]

We are slowly but surely implementing F versions of each component. You can look at the progress in CHANGELOG.md React@18 StrictMode doesn't work with old class based components. After all components will have F versions, I',m gonna move class based components out of the main package into separate legacy package, which will be out of maintaining, to reduce main package bundle size.

[Alvarg27]

I had the same problem when using the OverlayView component. However replacing it with OverlayViewF, which is also exported from @react-google-maps/api resolved the issue for me. Just thought this might help someone else too.

Thanks!!! this also worked for me!!!

[jaikishan-gaxon]

Same problem happening to me... but my problem solved... how ( reactStrictMode is false form next.config.js then problem solved...all maps r proper working)

[vonZ]

I had the same problem when using the OverlayView component. However replacing it with OverlayViewF, which is also exported from @react-google-maps/api resolved the issue for me. Just thought this might help someone else too.

Thanks, this worked fine for me!

[John-Daniels]

I had the same problem when using the OverlayView component. However replacing it with OverlayViewF, which is also exported from @react-google-maps/api resolved the issue for me. Just thought this might help someone else too.

Bro, you're a life saver, this solution was just what i needed, Thank you so much!

[JogiPrasadPakki]

I had the same problem when using the OverlayView component. However replacing it with OverlayViewF, which is also exported from @react-google-maps/api resolved the issue for me. Just thought this might help someone else too.

Thank you, your solution works

[EricWVGG]

This worked for me as well. The documentation ought to be updated to reflect it.

[thomastvedt]

I had the same problem when using the OverlayView component. However replacing it with OverlayViewF, which is also exported from @react-google-maps/api resolved the issue for me. Just thought this might help someone else too.

Thank you 🙏

[pravar-anu]

This is happening with me too. ~250 polygon features for countries on a world map and they all flicker every zoom in/out. I've confirmed this is not caused by re-renders of the map component by using the React profiler. Using react v18.2.0.

@QLeitz Did you find any solution ?

[JustFly1984]

Divide everything in smallest components, wrap all exports with memo, use useMemo and useCallback everywhere.

[ducthong1991]

There is the fix for this, just use patching the change for your code https://github.com/google-map-react/google-map-react/pull/1224