Bug: Memory leak in react while focusing input elements

[Elwazer007]

I 've noticed that having an input element focused and unmounting its owner component doesn't actually free up this component from the js heap , I 've created this simple blnkr to demonstarate this which add a dummy X to a ref inside a component that has an input element

React version: 17.0.2

Steps To Reproduce

1. Go to this plnkr
2. Click Tab Two
3. Click the Grow button a few times
4. Take a heap snapshot
5. Click the Grow button a few more times
6. IMPORTANT Focus the input element by clicking into it
7. Click Tab One ( This unmount the component that own the ref to the list )
8. Take another heap snapshot ( after running the GC)
9. Compare between the two snapshots
10. The added string X will be found within the `concat check the screenshot

Link to code example: can be found above

The current behavior

The current component that own the input element is still being there in the memory and doesn't free up its own resources afer being unmounted.

The expected behavior

The current component shloud free up its resources whenever being unmounted

[YagamiNewLight]

Same here, it's even happening with plain js. It seems not related to React itself.

[Elwazer007]

@YagamiNewLight I think This issue has already been resolved within react 18 , however I 'm not sure if there's a workaround for this in previous versions

[mshmyw]

@Elwazer007 @YagamiNewLight Not resolved with react 18.
I have test React version: 18.2.0 and 16.14.0.
Also, I have seen the discuss issue: #15157 #16087 and others.
Sadly, The memory leak still happening.
I can give a demo more obvious, the demo: https://codesandbox.io/s/admiring-khayyam-3s64gq?file=/src/App.tsx

Steps To Reproduce:

1. a simple demo can be found Here: https://codesandbox.io/s/admiring-khayyam-3s64gq?file=/src/App.tsx
2. running GC and Take a heap snapshot
   
3. Click 'open Modal click for test memory leak (has large input items)' and open modal
4. focus any input item
   
5. close modal
6. refresh state for click 'refresh state '
7. running GC and Take a heap snapshot
   

and after that you can found large detached input element exist

I cant sure its react bug or chrome bug. hope some one can help

no one answer this, I create other issue #27289 for attention

[YagamiNewLight]

It's actually a bug of chromium, here is the reference: https://bugs.chromium.org/p/chromium/issues/detail?id=866872

And here's a trick regarding this issue: Creating another focused input with no data attached to it before removing your big focused input can min this memory leak issue.

[mshmyw]

very thanks @YagamiNewLight.
And very appreciate if you can give an example for 'Creating another focused input with no data attached to it before removing your big focused input can min this memory leak issue'.

[YagamiNewLight]

哈哈，都是Chinese，我们用中文交流吧，你去抖音搜索一下 “游离节点造成的内存泄露”。就明白解决办法了

[Elwazer007]

Hi @YagamiNewLight can you add the solution you suggested here ?

[YagamiNewLight]

Hi @Elwazer007
Here's the issue: When deleting the input elements, no matter how many inputs are there on your screen, the chromium will always leak your current focusing input's memory.

And here's the trick:
Let's suppose you have a heavy rich-text input that will attach much memory to it, removing it directly causing the memory leak issue. But you can change your current focusing input before removing your rich-text input. That can be done by calling .focus method of another small input that doesn't have much memory attached to it. At this time, only this small input's memory is leaking, but not your heavy rich-text input anymore.

Back to React, things get more complicated, the issue becomes: As long as your inputs are group rendered by JSX, no matter which input you are currently focusing, deleting all inputs will just lead to every input's memory leak. But the trick above will still work.
You can test it with following link: Comment the input.focus(); to see the difference
https://codesandbox.io/s/snowy-dawn-z86kjt?file=/src/App.tsx

[sophiebits]

Based on this discussion there may be some that Chromium is retaining.

It may also help to try the latest canary version of React; I believe there have been some improvements made that are not yet in a stable release. It would be helpful to know if that solves it.

[gyzerok]

@sophiebits having the same issue in 18.2.0. I've tried react@canary react-dom@canary and it does not seem to have any effect.

In my case that leads to leaking the whole React subtree where input is located which gives huge leaks over time.

Also I can't somehow fix it with workarounds mentioned above. Are there any other possible workarounds?

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[gyzerok]

The issue is very much alive and problematic. It's unfortunate it doesn't get enough attention.

Also would be nice to have some workaround in React itself. Currently I have to call inputRef.remove() on unmount which does not play well with the strict mode.

@rickhanlonii can we tell the bot to avoid closing this forever? Feels weird to remind it every time that it's still a problem.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

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!

[rickhanlonii]

Thanks for the ping @gyzerok, I re-opened and tagged so I won't get closed by stalebot.