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.

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.

• javascript
• reactjs
• google-chrome

Share Follow asked Nov 20, 2017 at 11:39 lsgnglsgng 49599 silver badges2222 bronze badges 4

• There seem to be a lot of listeners, how many there actually should be? – Teemu Commented Nov 20, 2017 at 11:41
• The blue line is the memory occupation. The yellow line is the number of listeners in your page. Do you keep adding event callbacks to your ponent without removing the old ones? – Federico klez Culloca Commented Nov 20, 2017 at 11:42
• 1 There should be only one event listener for mouse clicks and one for movement. So for some reason, an additional event listener seems to get added on every click/mousemove. But how can this be? I don't have anything like .addEventListener() inside of my event callbacks. I'm just passing event handling functions as props to my ponents, the usual React way... – lsgng Commented Nov 20, 2017 at 11:48
• I am having the same problem in a similar Webgl application. No Three.js. – kevzettler Commented Apr 12, 2018 at 13:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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./facebook/react/issues/12141

I've taken a quick look at your code, and my guess is you're passing => functions to something that adds the function as a listener, then later tries to remove it (here, for instance). You can't remove a => listener, since a new function will be created each time the render method is called (and therefore calling somewhere .removeEventListener(myArrowFunction) will try to match the function with one that's already been added, but they aren't equal.

Anyway, don't use arrow functions as listeners.

Edit : well, yeah, use arrow functions but declared as instance methods. Or stored as constants. Not as closures.