Mapbox React 18 rendering issue
Kapture.2022-05-27.at.15.12.47.mp4
The viewport sync between Mapbox and a React/SVG overlay is slightly lagging when using React 18. It goes away when downgrading to React 17 or when using the legacy ReactDOM.render()
instead of ReactDOM.createRoot()
for rendering the app.
Looks like the issue is caused by the Automatic Batching and wrapping setViewport
into flushSync
solves it at least in this demo app.