Running cleanup function for components

[ghivert]

Currently, there's no way to run cleanup functions at the unmounting of a component. However, custom element expose disconnectedCallback to run cleanup function. Being able to use them in Lustre would be a life changer.

[yoshi-monster]

This is a common misconception, but disconnectedCallback does not run when the component unmounts, but when it is removed from its current place in the DOM - this can have many reasons, one of which is that it is actually removed, but moving it somewhere else will also trigger that same event!

I think we should have a proper unmount event, not forward disconnectedCallback.

[hayleigh-dot-dev]

What kind of cleanup code would you want to write?

[ghivert]

It's quite common to subscribe to document events or window events. Such event listeners should be properly cleanup before destroy. Something like

// On mount
window.addEventListener("resize", fun)
// On unmount
window.removeEventListener("resize", fun)

[hayleigh-dot-dev]

Does that mean this function would need to return an Effect? Would it also need access to your model 🤔 I guess it could be fn(model) -> Nil but...

I see some problems with this:

• It would be very possible to introduce a memory leak by hanging on to references to dispatch or your Model. Unlike apps, its reasonable to think that there will be scenarios where a given component is mounted and unmounted many times during the life of an application so there's a real footgun there.

• For server components there's no guarantee this function would ever run, as the process may exit ungracefully or be killed by a parent.

• Also for server components should this function run when the server component process exits, or when the server component custom element is disconnected?

Some spiky edges to consider I think.