react-map-gl makes request to its api everytime the component is rendered

Question

I am using react-map-gl Mapbox for map but it seems to make requests to mapbox api every time the component is rendered. How can I prevent this? My component

<ReactMapGL
        mapboxApiAccessToken={accessToken}
        {...viewport}
        onViewportChange={nextViewport => setViewport(nextViewport)}
    >
        {markers(list, chooseHandler)}
</ReactMapGL>

ok currently working on project with react mabox using this library https://github.com/urbica/react-map-gl but i didn't noticed the issue. maybe this has to do how the component work . — adel, Aug 07 '20 at 17:42
Could you check this site? where you could click on some side nav and go back to the page, the map re-renders https://docs.mapbox.com/mapbox-gl-js/api/ — Lokesh Bajracharya, Aug 07 '20 at 17:53
i don't know why you care about this but when change the page and go back to it the map will re-render which will recall mapbox api . — adel, Aug 07 '20 at 18:44
That is exactly what is happening in my site as well thats why — Lokesh Bajracharya, Aug 07 '20 at 18:58
@LokeshBajracharya I encountered a similar issue on one of my projects. I use a Bottom Navigation from MUI and everytime I change the page, it re-fetches data... How did you solve it in the meantime? — 2Up1Down, May 14 '22 at 23:30

score 0 · Answer 1 · answered Jun 05 '22 at 08:57

I stumbled upon the same problem and could finally solve the issue. There is a property reuseMaps that takes care of this.

https://visgl.github.io/react-map-gl/docs/api-reference/map#reusemaps

If reuseMaps is set to true, when a map component is unmounted, the underlying Map instance is retained in memory. The next time a map component gets mounted, the saved instance is reused.

Edit: I saw that you switched to leaflet anyways. Hope it helps a future developer.

score 0 · Answer 2 · answered Mar 16 '23 at 10:14

Thanks for your answer 2Up1Down, it has been very useul.

However, I have noticed that when using reuseMaps, even the map on different pages get retained in memory and are displayed, even though they don't have the same props for example the initialViewState. Then, only when I interact with the Map, the props get updated. But that's not a desirable behaviour since the first thing I see is a map with the previous map props and initial position.

I am looking for a solution where only maps with same props are retained in memory

react-map-gl makes request to its api everytime the component is rendered

2 Answers2