Memory referenced by component state is not released when unmounted

[syranide]

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

What is the current behavior?
https://jsfiddle.net/z5ejtay2/ (EDIT: Updated with a better fiddle.)

Use Chrome, open fiddle, click on the date-output a few times so that it refreshes. Each creates a new XTest-object. Use the developer-memory tab in Chrome and record a new Heap Snapshot (for fiddle.jshell.net). If you search for XTest in the snapshot you'll see 3 or so instances.

Uncomment the componentWillUnmount-line and retry the same again. There will only be a single XTest allocation as expected.

So it seems that references to dead component instances are being retained by React, not forever, but for longer than they should. In my own more realistically complicated app it's not as apparent that they are being released at all, it's just continually increasing and they are never being released.

PS. This is currently a significant (but workaround-able) problem for me, because I'm instancing a memory-heavy editor which is currently causing memory to continually increase.

What is the expected behavior?
Immediately release references so that memory can be reclaimed.

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

[threepointone]

Just to confirm, could you try this with a prod build and confirm whether the issue persists?

[syranide]

@threepointone Same problem in prod https://jsfiddle.net/51L3gjkn/

FYI, you can easily trace and see what's holding the references in Chrome, so it makes it easy to debug. If you're not already aware.

[gaearon]

Some of it is by design but I'm not sure how much.

Related: #13702, #14380, #15157.

[syranide]

@gaearon Yeah, it's not ideal, but it's understandable if there's some retained references. But in my rather simple company test-app I'm literally seeing it just continually accumulate which seems quite severe, no reference of the component I'm looking at is ever released. I'm positively certain it's not something on my end, I'm not using ref or storing this. And in the memory profile it seems they're all referenced from React's internal state and not something I have control over.

[NicolasRannou]

@syranide did you figure out a way to work around it?

[syranide]

@NicolasRannou The only partial workaround is to manually clear state on unmount AFAIK.

[NicolasRannou]

Like this.setState({value: []}) :(
Thanks!

[syranide]

@NicolasRannou Not sure if that works during unmount? Could just do this.state = null.

[stale]

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]

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!