React-mapbox-gl: Memory leak

[pronebird]

I see a memory usage increase each time I move camera between two different location. Reloading browser window releases all memory, however even destroying ReactMapboxGl (not rendering it on page) does not release memory.

Therefore I think there is a memory leak somewhere. Last time I checked when jumping between two locations it went up to 1GB or RAM usage. I don't think that it's GC that does not release memory, it looks to me that some resources are being accumulated each time I move the map.

Now it can be issue with mapbox-gl or react-mapbox-gl itself, I am not sure about that.

[alex3165]

thanks for reporting, I will investigate as soon as possible

[pronebird]

Thanks. I am looking into this as well.

[kitten]

@pronebird Can you create a minimal js fiddle/bin or sth to reproduce this? I don't see it on the currently deployed version on Alex's site. If it occurs with only basic React Mapbox GL components being used, it's unlikely to be caused by anything in here.

The only thing that comes to mind is the clustering, since it was added recently, but like I said, I don't have a reproducible environment right now ;)

[pronebird]

@philpl I was able to reproduce memory increase by switching between "All shapes" and "GEOJSON" many times on @alex3165 website. I went as far as 2GB of RAM before I gave up. Not exactly sure what causes this. If it was simply cache issue, then I guess it would have released tiles over time because the map does not really move anywhere. Instead it keeps growing..

I test with Safari on latest macOS.

In my case I have electron app where I simply fly between two fixed locations and memory usage only keeps growing.

[z0d14c]

Hi, we have also been having memory leak issues in our application although have not 100% pinned down the cause. will be investigating ASAP and will share any findings/fixes.

[alex3165]

I have created a simple boilerplate, if you guys manage to reproduce the issue using it https://github.com/alex3165/react-mapbox-gl-debug, it is a first good start on investigating what is happening

[pronebird]

@alex3165 sorry for a dull report. Of course I will make a test case to reproduce this. Thanks again for making a debug boilerplate to make it easier!

[pronebird]

@alex3165 @z0d14c

I've created a simple test case which allows to observe certain growth in memory usage. It's a fairly simple scenario that we have in our app. We move the camera between two locations and change between two fixed zoom levels. All of that is done by calculating map bounds with cheap ruler.

Memory usage on page load is about 280M. After flying the map between two markers for 5 to 10 minutes I ended up with over 900M of memory usage.

I understand that it takes a lot of memory to display the map, but I would assume that if I had two fixed locations with two fixed zoom levels then at some point the memory consumption should stabilize after all tiles are cached in memory.

This is just my first observation with new debug boilerplate by @alex3165. I am not able to pin down the cause yet.

DIFF: https://github.com/pronebird/react-mapbox-gl-debug/commit/4a7db01d2317d15b7c615f49e596ab3485ce5b18

[z0d14c]

thanks @pronebird. this is pretty concerning. i hope to find some time to work on this and a few other issues with the library, but I will admit I'm not 100% sure where to start with this.

[alex3165]

Hey everyone, it is been a long time since this issue hasn't been updated. Although with react-mapbox-gl v2 I potentially fix some memory leaks issues and mapbox-gl itself fixed some too so it is unlikely this issue is relevant anymore. If so feel free to open a new issue with some more explanations.