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