React: Input nodes leaked by the browser retain React fibers

[albertxing]

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

🐛

What is the current behavior?

Browsers retain references to inputs in their undo stacks, which in turn retain React fibers (including memoizedProps)

See https://bugs.chromium.org/p/chromium/issues/detail?id=1029189

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:

https://jsfiddle.net/altxg/nzu6ab5e/3/

What is the expected behavior?

Although the leak originates from the browser, it might be helpful if React detached internal fiber references from input and contenteditable nodes on unmount

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

All versions of React as far as I know.
I can reproduce the leak on Chrome and Firefox on Mac

---

Potentially related issues:
https://github.com/facebook/react/issues/12692
https://github.com/facebook/react/issues/16087

[albertxing]

Although we can't address the browser leak with React, I'm hoping to get some guidance on patching React to run some sort of cleanup on <input> DOM nodes to reduce the impact of this leak.

Any advice would be appreciated!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[gaearon]

Interesting find. Let's keep this open for now.

[gaearon]

Is this Chrome only? What about FF? Safari?

[gaearon]

I'll ping someone from Chrome. I think ideally we'd fix this upstream instead of hacking around it in React.

[albertxing]

I tested this in both Firefox and Safari, and both seem to leak the arraybuffers. I'm not familiar with either of their memory debugging tools though, and I don't have a debug symbols build for them, so I'm not sure what the leak is internally (whether it's the undo stack or something else).

[ricardobrandao]

I've tried to reproduce this memory leak using hooks without success.

macOS: Catalina 10.15.4
Chrome: Version 81.0.4044.138
React: Version 16.12.0

[albertxing]

@ricardobrandao I'm not exactly sure why there's a difference between the class vs. hooks implementation, but in your hooks implementation it looks like the input node is removed before a value is assigned to it — because the inputs never receive a value they aren't retained in the undo stack.

I've forked your implementation and set the key to num / 2, so the input is removed on every second keypress, which shows the memory leak: https://codesandbox.io/s/react-issues-17581-memory-leak-by-the-browser-retain-4uj2p