Bug: Detached DOM node memory leak

[jdolearydl]

Given a table in react that displays data from an API which can be refreshed with completely new information, I observed a detached DOM node leak (notice the green numbers):

Note: The DOM Nodes seem to settle at 21,000 but there shouldn't be that many nodes anyway, as you can see it starts at 7,000 after the first table generation. In my real-world app, these detached nodes persist even through navigation (with react router).

React version: 16.12.0

Steps To Reproduce

1. Open the example full page (link to code below)
2. Open chrone dev tools and view the "Performance Monitor" tab
3. Click the "Regen" button many times
4. Notice that the DOM Nodes increase and even after a GC not all the detached nodes are cleaned up

Link to code example:
Codesandbox

The current behavior

The DOM Nodes continue to increase when the table is regenerated, and even after a GC, not enough of the detached nodes are cleaned up.

The expected behavior

I would expect all the detached nodes to be cleaned up after a GC as they are in this example.

[jddxf]

I believe it's already fixed in #17666. You can confirm it here.

[jdolearydl]

Yes, that resolved it. Will this be included in the next release?

[jddxf]

I don't know for sure but I guess so.

[kelly-tock]

anyone seeing this in react 17 as well?

[kamilzielinskidev]

@kelly-tock just found it today, these nodes number comes back after few rerenderes but still very tricky thing

[kelly-tock]

I eventually found it via heap snapshots, so my case was not react related.