JavaScript event listener memory leak

Question

I'm working on a WebGL application using React, Redux and Three.js. My application uses mouse movements and clicks as input. Now for some reason, whenever I click or move the mouse, my application gets slower and slower. As shown in the performance profile below, there seems to be some kind of memory leak causing the memory used by event listeners to constantly grow.

As far as I understand, the yellow line in the screenshot shows the constantly growing memory usage for event listeners.

But what exactly does this yellow line represent? Is it the amount of memory used by event listeners? Or the number of registered listeners? Or the number of registered/unhandled events?

Has anybody experienced a similar problem in the past and maybe found the solution?

The full code of my application/prototype can be found in this repository. Unfortunately I haven't been able yet to isolate the cause of the issue or to reproduce it in a simple code snippet.

Answer 1

This may actually be a Dev only issue. If you build the react project with NODE_ENV=production This issue may not persist.

This appears to be related to an open issue on react at: https://github.com/facebook/react/issues/12141