Community
Select to view content in your preferred language

Any known issues with React Dev Tools causing memory leak with Esri Arcgis JS SDK?

412
1
10-25-2024 07:59 PM
JonathanTiu
by
Occasional Contributor
‎10-25-2024 07:59 PM

We accidentally found this while testing our product this week.

One of our developers happened to have React Dev Tools installed in his browser. We ran our application which rendered 4 maps in a browser tab:

JonathanTiu_0-1729910686140.png

 

He went to another browser tab then left for some time ...more than 10 minutes. Came back and flipped back to the browser tab with our 4 maps, we noticed maps started disappearing, almost as if unloaded like this:

JonathanTiu_1-1729910782534.png

 

Attempting to interact with the 'disappeared' map caused all sorts of console errors like

JonathanTiu_2-1729910905938.png

The map was essentially useless and we could not interact with it.

We then noticed the memory consumption had shot to 1.5GB and beyond.

We quickly grabbed a heap snapshot to look.  The most obvious thing that stood out was the sheer number of array buffers.  From previous memory analysis, i remember there is usually one of these per Map/MapView but here we saw upwards of 16 in that page with just 4 maps.

JonathanTiu_3-1729911403178.png

 

i then noticed one of them had a stack referring to the react dev tools.

JonathanTiu_4-1729911503250.png

So on a hunch, we uninstalled React Dev Tools and the problem completely disappeared!

We reran this scenario various times and noticed even while sitting on the browser tab, after a while, the memory consumption would start increasing even though we were not interacting with it at all.

I did google and it seems some people have accused the React Dev Tools of creating memory leaks.

Anyways i am bringing this up because i'm curious if Esri is aware of this?

 

0 Kudos
1 Reply
AddisonShaw
by
Occasional Contributor
‎10-29-2024 10:22 AM

Good catch, I've been following your posts around the JSArrayBufferData bloat. I do know simply having dev tools open adds memory overhead in all cases, but never correlated it with React Dev Tools specifically. I want to say this is only a problem when you've got dev tools open and it's especially pronounced if you're running a local build of your app, which unfortunately is typically the primary dev workflow. I don't think these would be present in a production build, but cannot say for sure.

0 Kudos