Skip to content

Instantly share code, notes, and snippets.

@runspired
Created November 5, 2015 06:35
Show Gist options
  • Save runspired/b5e50a2a70b6308ee560 to your computer and use it in GitHub Desktop.
Save runspired/b5e50a2a70b6308ee560 to your computer and use it in GitHub Desktop.
ES6 Fat Arrow ( => ) functions can cause memory leaks when used with Event Handlers.
class Foo {
constructor(element) {
this.element = element;
this.setupHandlers();
}
doFoo() {}
setupHandlers() {
this.listener = () => {
this.doFoo();
}
this.element.addEventListener('scroll', this.listener, true);
}
destroy() {
this.teardownHandlers();
this.element = null;
}
teardownHandlers() {
this.element.removeEventListener('scroll', this.listener, true);
// without this next line, the `Foo` instance and any other scope present within the instance
// will leak, preventing garbage collection.
this.listener = null;
}
}
@runspired
Copy link
Author

Unless of course you're holding on to a reference of instance Foo or this.listener elsewhere..clarifying, just in case

I assumed I was, and spent a huge amount of time digging through the heap and my code making sure things were properly dereferenced. It's still possible, but at this point highly improbable. I will be digging more.

I have not tested without transpilation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment