Listeners in Chrome dev tools' performance pro

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?

• Is the increasing Listener could 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

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.