Render performance improvements

[mxmzb]

Hey, I have bound a scroll value to the zoom prop of the map, so as the user scrols the map zooms in or out. This works perfect on my M1, however on phones and older machines it starts lagging (or if I throttle the CPU on my mac). I guess it's because the state changes on every bit of user scroll, so there is a lot of rerenders. I am wondering if there is a way to improve the performance here smhw (the tile loading of the map also gets a little clunkier with throttled CPU, but that's quite likely out of this components control anyway)?

[mrMetalWood]

Hi @mxmzb
Are you seeing the performance issues only when having the zoom prop bound to some state? Did you try to use defaultZoom just to test if the issue is really caused by the state handling?

What is your use case for having the controlled zoom? One thing you can try:

• Use the defaultZoom prop to allow free zooming
• Update your zoom state with the onIdle event
• Have a useEffect which runs when you zoom state changed and then calls map.setZoom() with the current zoom

This way you can keep track of the current map state, although not in real time but only when the map idles. And you also can set the zoom from some other part of your app and the map should react accordingly with the useEffect