search

preactjs / preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
https://preactjs.com
MIT License
36.76k stars 1.96k forks source link

Zooming is extremely slow when using react-map-gl with Preact #3211

Closed gu-stav closed 3 years ago

gu-stav commented 3 years ago

Describe the bug

When using the library react-map-gl zooming the map is extremely slow in preact compared to react. The weird part is: as soon as the devtools are open and you are trying to record a performance profile, everything seems to be fine. I have no idea why this happens nor what could be done to debug this ...

To Reproduce

You can use the following codesandboxes for a comparison:

Preact: https://codesandbox.io/s/zen-ptolemy-dk4n1 React: https://codesandbox.io/s/amazing-fog-zduue

Try to zoom into the map - you'll see with react it's very smooth, but with preact it stutters a lot. This gets even worse if the map contains many markers, such as: https://seebruecke.org/mach-mit/lokalgruppen (this page is using preact too).

Expected behavior

I would expect that preact matches the performance of react.

JoviDeCroock commented 3 years ago

This seems to relate to how we queue updates, when I change the way of updating to synchronous behavior (like React) we see that it's smooth https://codesandbox.io/s/musing-easley-47424?file=/src/index.js

This isn't as much actual performance as it's perceived performance, the map tool seems to enqueue a whole bunch of updates for that one scroll to animate through states. In most other animation libraries a mutable ref is used 😅

gu-stav commented 3 years ago

@JoviDeCroock Oh wow, thanks! So far I've completely overlooked this options page. This indeed fixes the issue - I guess it's not a bug then, so I'm closing this issue.