react-mapbox-gl icon indicating copy to clipboard operation
react-mapbox-gl copied to clipboard

Published 20 hours ago • verified publisher icon alex3165

Markers wiggle on React 18

Open agusterodin opened this issue 3 years ago • 6 comments

Reproducible by upgrading React version of website example to version 18

Before (React 17):

https://user-images.githubusercontent.com/10248395/178124854-0de1e9bc-7e79-48ee-8a57-37c2c3dd8ad3.mov

After (React 18):

https://user-images.githubusercontent.com/10248395/178124860-bec3d0be-b9fe-410c-b538-9d28a0f64982.mov

agusterodin avatar Jul 09 '22 22:07 agusterodin

+1 to this. Thanks for the videos.

mcgrealife avatar Oct 01 '22 14:10 mcgrealife

+1 to this, any one know how to fix this issue?

tranthaison1231 avatar Dec 12 '22 02:12 tranthaison1231

@agusterodin Have you fixed this prolem?

tranthaison1231 avatar Dec 12 '22 02:12 tranthaison1231

Because React 18 events are auto batching state update when the map is moving, you guys can fork this repo and put flushSync to map 'move' event in ProjectedLayer component, hope this helps you image

lduchuy2002 avatar Dec 15 '22 14:12 lduchuy2002

Is there any interest in making this part of the repo here instead of having to fork and go that way?

nickpolet avatar Nov 08 '23 16:11 nickpolet

Hi @nickpolet . I created 2 files and use the Marker component instead of forking image

Note: inside ProjectLayer component which i copied from this library image

So somewhere in my app import Marker from 'lib/react-mapbox-gl/Marker'

<Marker ...your props />

lduchuy2002 avatar Dec 20 '23 07:12 lduchuy2002