<textarea autoFocus/> seems to leak DOM nodes

[afarnsworth-valve]

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
React components with <textarea autoFocus> seem to leak DOM nodes after being unmounted, retaining their entire DOM tree.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
There's a JS Fiddle here:
https://jsfiddle.net/afarnsworth/sw2td7xp/2/

To test, open up the Chrome Performance Monitor, and check and uncheck the "Show stuff" check box. The number of DOM Nodes will climb. Clicking garbage collect will not seem to reclaim any.

You can click "run" in jsfiddle to release the old nodes. Uncheck the "Enable autofocus" box, and repeat the experiment (click "Show stuff" a lot). This time the DOM nodes seem to get reclaimed.

A heap snapshot shows some detached dom trees referenced in React DOM internals

What is the expected behavior?
DOM nodes aren't retained after being unmounted.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16.3, Google Chrome on Windows.

Don't know if this issue is new or not, our application may have always been affected by this.

[patrick-mcdougle]

I can reproduce this, however, I can not reproduce this in the JSFiddle since dev tools only inspects the main window, and does not aggregate the DOM nodes from any frames (that took me too long to figure out 😿). I'm a noob to react's internals, but I'll take a look.

[patrick-mcdougle]

Someone with experience using the fiber debugger might want to take a look at this. It seems that DOM nodes that were mounted at the same time as a textarea with an autoFocus attribute set leak DOM nodes and FiberNodes. Perhaps it has to do with how the autofocus happens through scheduling work to be done after the initial mount of the nodes. See commitMount and finalizeInitialChildren.

[gaearon]

You are testing development version of React so that's not representative of production.

Additionally, React keeps a reference to the previous tree for one more update after it's been released, so switching between two views there and back is not guaranteed to free the tree. It will, however, be freed in a real application where the user does more than click on one checkbox many times.

If you can reproduce a memory leak in production version with a more complex scenario please file an issue with instructions. Thanks!