Bug: Chrome dev tools memory leak heads up

[faridsaid20]

TLDR: There is a bug with Chrome dev tools that prevents nodes to be garbage collected ( detached nodes )

I noticed a lot of detached nodes when navigating in my Vite react 18 app.
Thought it was something with react-router, but then tried with tanstack router and there was the same issue.
Later I could reproduce the bug with raw react code. So I spent last few days deep diving into react source code until it lead to pure JavaScript events causing this...

By the end I figured out that it was chrome dev tools causing this, they start tracking on all events that won't allow garbage collection or something like that. And it is relatively new bug.

Tested with chrome 83 and 104. No issues with detached nodes...
Not sure which version of chrome introduced this. But beware memory leak bug reports that could come soon.

Here is the video of the same code with chrome 104 (left) and chrome 131 (right)

memoryleakChrome.mp4

React version: Tested with 16, 18 and 19

Steps To Reproduce

1. Open codesandbox. There is a button called "open in a new tab", click it.
   

2. Open chrome dev tools.

3. In the video I used performance monitor. But you can track memory leaks however you want in Memory tab.

4. Each time you click on event button and then on render button it will fail to garbage collect previous nodes.

To make sure that it is chrome dev tools and not react.

1. Open the same sandbox preview in new tab. Don't open dev tools yet.
2. Start clicking on event and render buttons dozen times.
3. Open dev tools and see that there are no detached nodes.

Link to code example: https://codesandbox.io/p/sandbox/lingering-bash-lschws

The current behavior

Fails to garbage collect unused nodes

The expected behavior

Should garbage collect

[rjgotten]

@faridsaid20

https://issues.chromium.org/issues/329541444#comment10

Chrome's developer tools have a memory leak in the "live metrics" view of the new, reworked performance panel.
This is an experimental view that was recently promoted to be 'stable enough' and starting broad rollout and default enablement, so might be why you've started to see this problem.

Go into the dev tools' settings, open the experiments tab and you can still kill the "live metrics" experiment by removing the checkmark.

(And then hope and pray Google actually fixes it before promoting the thing out of experimental status altogether, and removing the ability to disable it.)

[faridsaid20]

@faridsaid20

https://issues.chromium.org/issues/329541444#comment10

Chrome's developer tools have a memory leak in the "live metrics" view of the new, reworked performance panel. This is an experimental view that was recently promoted to be 'stable enough' and starting broad rollout and default enablement, so might be why you've started to see this problem.

Go into the dev tools' settings, open the experiments tab and you can still kill the "live metrics" experiment by removing the checkmark.

(And then hope and pray Google actually fixes it before promoting the thing out of experimental status altogether, and removing the ability to disable it.)

You are right, looks like it's the reason

[Alexectramagneta]

Hello I'm concerned about this and my unfinished code but wat the big fork represents Evan from my point of view is a very deep in trenched issue and I'm not going to let it be for nothing