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.