Memory leak on React > 16.2.5

[mgreer]

Do you want to request a feature or report a bug?
Possible bug, or unexpected change in internal behavior

What is the current behavior?
We are seeing a substantial memory leak in our codebase in versions of React > 16.5.2. Bisecting the issue, it seemed to appear at commit 7bee9fb.

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:

Our apologies, we are unable to fully isolate the issue to a minimal demo, and suspect it is not a bug but a behavior change which our code relied on. The leak seems to be in the messages area, where many components are created and released quickly.

What is the expected behavior?
Old fibers should be garbage collected, but cannot be. Components are retained in memory.
We have run the affected code area in StrictMode, which allowed us to identify some event leakage but even when this was addressed (by moving listeners to componentDidMount from the constructor) the memory leak continues. There are some findDomNode usages remaining, but even if we move those it does not fill the leak.

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

We are seeking suggestions on what internal could be causing retention of components and nodes by our code, and better ways to isolate the issue.

Thank you!
-Mike

[Dergash]

We've encountered similiar issue on 16.6.3.
Allocation instrumentation on timeline shows that our application allocates a lot of FiberNode objects:

And timeline shows that they are never collected, heap grows up without GC firing when we expecting it:

At the same time, timeline on 16.8.0-alpha.1 (16.7.0 shows the same) GC seems to fire correctly:

May be it was already fixed by this?
0e9cb3f It's tagged 16.7.0

[mgreer]

Sadly no, that had been our hope but leak persists.

[proluk]

We had similar problem but we fixed that by upgrading react-dom and react lib to 16.7

[gaearon]

The only relevant fix I'm aware of is #14276 which got into 16.7.0. We'd need a reproducing case to help more.

Remember to test production version, and also that we retain a reference to deleted children for one more update (#12420 (comment)).

[ejallday]

@mgreer take a look at #14284 Any of your components have <input type="password"> near the problem?

[Pitasi]

Updating from React 16.6 to 16.8 drastically improved our memory usage, but it's still there, slow and inexorable.

Currently I have installed react and react-dom 16.8.6.

More info: I'm using Electron, BlueprintJS and Redux, I have a polling component that updates itself making some http requests and dispatching a Redux action.

From devtools I can see a lot of FiberNode and they are never deleted, they just keep growing.

My naive implementation of the component it's something like this:

class MyComponent extends Component {
  componentDidMount = () => {
    this.interval = setInterval(this.tick, 1000);
  };

  componentWillUnmount = () => {
    clearInterval(this.interval);
  };

  tick = async () => {
    if (this.updating) {
      return;
    }

    this.updating = true;
    try {
      // dispatch async (thunk middleware) redux action,
      // this will trigger an API and maybe a re-render this component
      await this.props.doUpdate();
    } catch (e) {
      /* handle error */
    }
    this.updating = false;
  };

  render() {
    <span>{this.props.myState}</span>
  }
}

if I can help providing any information, just let me know. Thanks!

[raRaRa]

I have very similar memory leak with video and audio elements, perhaps related in some way? Do you find a lot of detached nodes if you create a heap snapshot under memory and search for detached in the class filter? You can check out my issue here, which is very easy to reproduce with a simple demo: #15583

[hamham91]

We have a somewhat similar memory leak (although we're experiencing it on all React 16.x versions) where there are a lot of detached nodes that never get garbage collected. The issue goes away if we downgrade to React 15.x.

You can see the documentation in this issue (along with a reproducible example): #15637

[magmaliang]

I've got the same problem. Any one solved this problem except demotion？

[tlenex]

There is an open PR #15157.

[qianlongdoit]

The only relevant fix I'm aware of is #14276 which got into 16.7.0. We'd need a reproducing case to help more.

Remember to test production version, and also that we retain a reference to deleted children for one more update (#12420 (comment)).

This case maybe helpful.
Potential memory leak when navigating between pages