12 ms·
Memory leaks can occur when a component adds events to an element outside of the component (such as the window) and then gets removed from the DOM without remov
by unemployable 2y ago
Memory leaks can occur when a component adds events to an element outside of the component (such as the window) and then gets removed from the DOM without removing the event handler from the window. This is solved in native Web Components by the mount/unmount methods where you can run code to remove event listeners when the component has been unmounted.
For other event listeners, they get removed when the DOM element is removed.
The frameworks do not solve this to any greater degree. They also just make everything invisible and behind-the-scenes and hard to debug due to their declarative nature, but that is another topic.
- pcthrowaway 2y agoRemoving event listeners upon some component being removed actually sounds like a great use case for the new FinalizationRegistry API[1] [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- ngc6677 2y agoExample with web components in all frameworks https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/ https://webcomponents.dev/blog/all-the-ways-to-make-a-web-co... and an other version to experiment with https://jsbin.com/yiviragiba/8/edit?html,css,js,console,output https://jsbin.com/yiviragiba/8/edit?html,css,js,console,outp...