4 ms·

Wouldn't this have loads of memory leaks from never removing the event listeners when the todo elements go away? I think it hides the complexity by pretending

by syspec 4y ago

Wouldn't this have loads of memory leaks from never removing the event listeners when the todo elements go away? I think it hides the complexity by pretending that's not a problem

realPubkey 4y ago
Also it does not work properly when it is used in more then one browser tab.
- grabanski 4y ago
  Here's what it would look like to support that usecase: https://github.com/1Marc/todomvc-vanillajs-2022/commit/0997999497617e358e0132058ceeb23d9ae34a73 https://github.com/1Marc/todomvc-vanillajs-2022/commit/09979...
gherkinnn 4y ago
The event listeners get cleaned up by the GC. At least in modern browsers. While events aren’t explicitly mentioned, MDN offers an insightful read: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management#garbage_collection https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memo... Alternately, one can use event delegation [0]. As does React under the hood [1]. 0 - https://javascript.info/event-delegation https://javascript.info/event-delegation 1 - https://reactjs.org/blog/2020/08/10/react-v17-rc.html#changes-to-event-delegation https://reactjs.org/blog/2020/08/10/react-v17-rc.html#change...
- syspec 4y ago
  I think there's a reason why events are not mentioned in your linked document... The reference is maintained in memory because the browser has no idea if you will be using it again. After creating the listener, you may very well append it to another element later for all the browser knows. Also the browser doesn't make a distinction to the type of event (such as `click` ), and say "Oh well you can't click on an element not in the DOM, I think I can clean this up" So no it will not clean it up and it will leak memory, see for yourself
  - grabanski 4y ago
    Here's what I came up with for switching to event delegation: https://github.com/1Marc/todomvc-vanillajs-2022/blob/event-delgation/js/app.js#L51-L78 https://github.com/1Marc/todomvc-vanillajs-2022/blob/event-d...

by syspec 4y ago

Wouldn't this have loads of memory leaks from never removing the event listeners when the todo elements go away? I think it hides the complexity by pretending that's not a problem

realPubkey 4y ago

Also it does not work properly when it is used in more then one browser tab.

grabanski 4y ago
Here's what it would look like to support that usecase: https://github.com/1Marc/todomvc-vanillajs-2022/commit/0997999497617e358e0132058ceeb23d9ae34a73 https://github.com/1Marc/todomvc-vanillajs-2022/commit/09979...

gherkinnn 4y ago

The event listeners get cleaned up by the GC. At least in modern browsers. While events aren’t explicitly mentioned, MDN offers an insightful read: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management#garbage_collection https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memo... Alternately, one can use event delegation [0]. As does React under the hood [1]. 0 - https://javascript.info/event-delegation https://javascript.info/event-delegation 1 - https://reactjs.org/blog/2020/08/10/react-v17-rc.html#changes-to-event-delegation https://reactjs.org/blog/2020/08/10/react-v17-rc.html#change...

syspec 4y ago
I think there's a reason why events are not mentioned in your linked document... The reference is maintained in memory because the browser has no idea if you will be using it again. After creating the listener, you may very well append it to another element later for all the browser knows. Also the browser doesn't make a distinction to the type of event (such as `click` ), and say "Oh well you can't click on an element not in the DOM, I think I can clean this up" So no it will not clean it up and it will leak memory, see for yourself
- grabanski 4y ago
  Here's what I came up with for switching to event delegation: https://github.com/1Marc/todomvc-vanillajs-2022/blob/event-delgation/js/app.js#L51-L78 https://github.com/1Marc/todomvc-vanillajs-2022/blob/event-d...