Apparent Slow (25 Bytes per Render) Memory Leak with React / React-Dom?

[larkintuckerllc]

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

bug

What is the current behavior?

In a long-running React application, finding a very slow memory leak (looks to be about 25 bytes per render). To eliminate virtually everything, wrote the simplest possible examples (at end of issue).

Test methodology was to

note: Also disabled all Chrome extensions before testing and ran the production build (from create-react-app to eliminate any other possible source of leaks).

1. pause execution early
2. force multiple garbage collections (using Dev > Performance)
3. record starting "JavaScript memory - LIVE" using Google Chrome - Task Manager
4. Run execution for 10,000 iterations.
5. pause and record as in 1-3.

Memory at start: 8,088K
Memory at end: 8,345K
Difference: 257K

To eliminate the browser, ran test with a simple loop (also at end of issue):

Memory at start: 6,792K
Memory at end: 6,813K
Difference: 21K

note: I really cannot account for why this (maybe the console.log?)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/84v837e9/).

See code snippets at bottom; wanted to eliminate all sources of leaks so did not use JSFIDDLE.

What is the expected behavior?

Expect the memory usage to be the same as the simple test loop; really should not be any memory growth that is not cleaned up with garbage collection.

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

Browser: Chrome Version 59.0.3071.115 (Official Build) (64-bit) - LINUX
react: 15.6.1
react-dom: 15.6.1
create-react-app (react-scripts): 1.0.12

Not sure about previous versions of React.

SAMPLE: REACT APPLICATION

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  componentDidMount() {
    window.setInterval(() => {
      this.setState({ test: 'Test' });
    });
  }
  render() {
    window.console.log('TEST');
    return (<div>Test</div>);
  }
}

SAMPLE: BASELINE APPLICATION

window.setInterval(() => {
  window.console.log('TEST');
}, 20);

[gaearon]

Can you try with 16 beta?

[larkintuckerllc]

Will try with 16 beta now; it would be nice to not have to back out of using React (really like it). BTW, I didn't copy the last line of code (obviously).

ReactDOM.render(<App />, document.getElementById('root'));

[larkintuckerllc]

Just downloaded react 16.0.0-beta.5 and ran:

yarn install
yarn build

copied build/dist/react.production.min.js to my project's node_modules/react/react.js
copies build/dist/react-dom.production.min.js to my project's node_modules/react-dom/index.js

note: Realized that with CRA, the easy button strategy was to over-write these "real" files.

Using same procedures as above (using production build), I got the following results (ran it twice to be sure):

Memory at start: 8,345K
Memory at end: 8,669K
Difference: 324K

Memory at start: 7,968K
Memory at end: 8,158K
Difference: 190K

note: I also was particularly careful to verify that I was using the newest version during testing by looking at Chrome > Sources > localhost:8080 > static > node_modules > react > react.js (and react-dom > index.js) and confirmed that I was using right files by looking at source:

/**
 * react.production.min.js v16.0.0-beta.5
 */

/**
 * react-dom.production.min.js v16.0.0-beta.5
 */

Let me know if there is anything more I can do to assist.

[gaearon]

Can you look into which objects are being retained?

[larkintuckerllc]

NEVERMIND.... It appears that my testing methodology was broken and it does NOT look like there is a problem with React (rather a problem with Chrome). I just so happened to be testing my actual application and noticed that my Chrome "Tab: Developer Tools" was insanely large (70+ MB). When I closed it, I noticed that Chrome's Task Manager stopped showing the steady growth in the application that I was troubleshooting. I was seeing growth like 1 MB per hour in the application itself when Developer's Tools was open.

I went back to the React test that I did here and this time left the Chrome Developer's Tools CLOSED and just watched the Task Manager. Originally, I left Developer's tools open so that I could trigger a GC.

Without Developer's tools open, I saw the automatic GC process get triggered every so often and the memory would regularly drop way down to 5MB.

Kinda reminds me of my quantum physics day (something about Schrodinger's cat).

I am going to close this ticket.