Listeners In Chrome Dev Tools' Performance Profiling Results

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.

Solution 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.

Solution 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