Memory leak with many components and user input

[tariqporter]

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

Report a bug

What is the current behavior?

When creating many elements with react, and providing some user action - scrolling in this example, the memory will continually increase and never be garbage collected

https://github.com/tariqporter/react-memory-leak

git clone https://github.com/tariqporter/react-memory-leak
cd react-memory-leak
yarn start

Click the Start button

And start scrolling up and down the page (Will keep attempting to automate the scrolling with the bug persisting)

The memory will continually increase and never be garbage collected. Once the bug begins happening, the user no longer needs to scroll; the memory will keep increasing without any input. 2GB of memory used within a couple of minutes:

This is part of a larger application that has meant it has become unusable with react 16x. It uses react-virtualized, and we also created our own table virtualization, but this memory leak happens with both of them, hence creating this issue.

What is the expected behavior?

I would expect garbage collection to happen at some point and look like the following (The following is the same example with no user input)

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

This is tested in chrome 74.0.3729.131 and firefox 66.0.5 on react 16.8.6. We believe it is for all react 16x

[tlenex]

There is a patch #15157 that could help. Can you try it out @tariqporter ?

[tariqporter]

#15157 This seems to resolve the issue we have in our application.

The production build still seems to be noticeably slower than development, but that is likely another issue.

[tariqporter]

Upgrading to v16.9 has resolved this issue!