Listeners in Chrome dev tools' performance profiling results

Question

I have been profiling a React app using Chrome dev tools and I've discovered a linearly increasing Listener count. Take a look at the screenshot below. The Listeners are in orange.

I narrowed it down to a simple countdown value render inside p tags. The remaining time is generated using setInterval function every 1000ms and then formatted and rendered inside the p tags.

I created a simple React app using create-react-app and modified the code inside the App.js's App component to update the value of Date.now() every second, and when I ran the profiler on it, I got the same result.

class App extends Component {
  state = {
    text: '',
  };

  loop() {
    this.setState({ text: Date.now() });
  }

  componentWillMount() {
    this.timer = setInterval(this.loop.bind(this), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return (
      <div className="App">
        <p>{this.state.text}</p>
      </div>
    );
  }
}

export default App;

• What are these so called Listeners to begin with?

• Could the increasing Listener be indicative of a memory leak?

• If yes, how can you avoid this if you have to display a countdown or timer which updates the time/remaining time every second or faster?

BTW, do you also see that the JS Heap usage seems to be going up as well, despite all those garbage collections? That is weird, isn't it?

Cheers

Detonation

Does setInterval get called more than once? Because you never cancel that timer. – Gardia

@EvanTrimboli Our actual code clears the interval at unmount. That's not it. Sorry I couldn't include it in the example. – Detonation

What's the point of including an example that isn't representative of your code? – Gardia

Normally, pointless. But in this case, I'm sure it is obvious there isn't a lot going on for it to get unmounted and remounted. Still, my bad. Anyway, the Listener count is identical to the real DOM changes. – Detonation

I'd love to know the importance of these listeners too and how they relate to garbage collection. – Papotto

Take a loot at this answer, it is a devtools issue, not a react issue #46696353 – Perspiration

Answer 1

DevTools tech writer and developer advocate here.

I was able to reproduce the possible memory leak, so I filed a bug on the create-react-app repo: https://github.com/facebook/create-react-app/issues/4037

I'll update this answer depending on the outcome of that issue.

Regarding your questions:

What are these so called Listeners to begin with?

These are event listeners. If you select the html element in your DOM Tree and then inspect the Event Listeners tab, you can see all listeners that have been defined on the page. Make sure that the Ancestors checkbox is enabled to show listeners on the html element's children. In this case, I would expect to see an increasing number of listeners, but I'm not, so that's why I suspect it might be a bug in create-react-app.

Is the increasing Listener could indicative of a memory leak?

Yes, it's possible.

Dorie

Thank you for posting on React Issues page. Looks like it is nothing to worry about. – Detonation

Answer 2

Try to run your example with React production build, this issue seems to be related to the React development build.

I just reproduced your issue and tried the production build and noticed it's not happened and the Listeners graph is flat

Bloemfontein