Potential listener leak on component interaction

[josh-mora-hg]

Provide a general summary of the issue here

I created a barebones/isolated react app to do some performance profiling on react-aria-components. Here is the sandbox link: https://wjwpsh.csb.app/. The only thing being done here is rendering of Button imported from react-aria-components. Based on performance profiling, the number of listeners is increasing on each click, suggesting that old listeners are not being cleaned up. This is leading to an "ascending staircase" graph for listeners:

• Each "step" is a button click
• The number of listeners at the start of the recording is 224
• The number of listeners at the end of the recording is 551

 

Here is the "Call tree" of the recording

🤔 Expected Behavior?

Listener count should not keep climbing as interactions occur

😯 Current Behavior

Listener count is climbing on each button click

💁 Possible Solution

Based on the recording "Call tree," it seems like usePress and/or useGlobalListeners (used by usePress) may need to be evaluated with respect to how listeners are managed.

🔦 Context

Here is a GIF of the profiler recording

🖥️ Steps to Reproduce

• Go to this sandbox: https://wjwpsh.csb.app/
• Open up Chrome devtools > Performance tab
• Check "Memory" checkbox, hit garbage collection brush icon button
• Hit record
• Interact with the button (click and/or keyboard interactions) for 10 seconds
• Stop the recording
• Note the result "ascending staircase" graph for the number of listeners

Version

react-aria-components@1.10.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue. Will need to dig into this more, initial test didn't yield anything. I monkey patched add/remove event listener

let originalAddListener = EventTarget.prototype.addEventListener;
let originalRemoveListener = EventTarget.prototype.removeEventListener;
// @ts-ignore
function newAddListener(this: EventTarget, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) {
  console.log('add listener', type, listener, options);
  originalAddListener.call(this, type, listener, options);
};
// @ts-ignore
function newRemoveListener(this: EventTarget, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) {
  console.log('remove listener', type, listener, options);
  originalRemoveListener.call(this, type, listener, options);
};
EventTarget.prototype.addEventListener = newAddListener;
EventTarget.prototype.removeEventListener = newRemoveListener;

and from what I can tell, all event listeners added are cleaned up.

I also watched event listeners in the dev tools panel and didn't see any of the categories getting bigger.

[josh-mora-hg]

Sounds good, thanks for taking the time to look into this!

[snowystinger]

I had a chance to look into this today. Apparently this is a feature of Chrome... angular/angular.js#13716

Event listeners are not cleaned up while recording. You have to manually click the "collect garbage" button. Then you'll see the number of listeners decrease down to the expected amount.

I'm going to close this unless there is a real life problem happening, then we can reopen.