19

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.

The Listeners are in orange and it keeps going up linearly

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

Anusha Dharmasena
  • 1,219
  • 14
  • 25
  • Does `setInterval` get called more than once? Because you never cancel that timer. – Evan Trimboli Jan 11 '18 at 06:41
  • @EvanTrimboli Our actual code clears the interval at unmount. That's not it. Sorry I couldn't include it in the example. – Anusha Dharmasena Jan 11 '18 at 06:47
  • What's the point of including an example that isn't representative of your code? – Evan Trimboli Jan 11 '18 at 06:51
  • 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. – Anusha Dharmasena Jan 12 '18 at 00:49
  • I'd love to know the importance of these listeners too and how they relate to garbage collection. – AlexKempton Feb 13 '18 at 16:10
  • Take a loot at this answer, it is a devtools issue, not a react issue https://stackoverflow.com/questions/46695853/javascript-listeners-keep-increasing – Royi Mindel Sep 20 '18 at 06:32

2 Answers2

9

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.

listeners tab

Is the increasing Listener could indicative of a memory leak?

Yes, it's possible.

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120
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

enter image description here

udidu
  • 8,269
  • 6
  • 48
  • 68