[elm-discuss] Leaking event handlers with Elm SPA

[Deedostar]

Hi everyone,

I have recently thought about how there is a chance in Elm to leak event
handlers if they are not cleaned up properly. A basic scenario where this
can happen is this:

Assume an SPA made of React with some embedded Elm parts which uses
subscriptions.
Now navigate to a page, which has an elm part, it will set the
subscription. Now navigate away, the subscription will stay. Now navigate
back to it and the component will create a new Elm app with yet another
subscription. Repeat these steps and end up with very many leaked event
handlers.

I created an example here: https://ellie-app.com/3LHDqnYqD4za1/10
(I am simulating navigating away and back with ReactDOM.render and
unmountComponentAtNode)

As Elm becomes more and more popular and is increasingly used in SPAs this
can become a problem with performance over a long page lifetime and also
lead to hard-to-debug-behavior, so I think it would be really important to
have some way to "clean up" after Elm with something like `app.kill()`.
Worth noting that the leaky behavior is not that problematic for non-SPAs
because a page reload will always clean up everything.

Does anybody have any thoughts to share about this topic. Having similar
issues or just realized that there might be some when reading this? Would
love to collect some thoughts.

PS: I know one could work around this issue my using ports and shutting
down the subscriptions manually, but I believe that there should a way to
shut the app down from the outside and also that workaround does not work
for the Navigation.program.

[Deedostar]

Hi everyone,

I have recently thought about how there is a chance in Elm to leak event
handlers if they are not cleaned up properly. A basic scenario where this
can happen is this:

Assume an SPA made of React with some embedded Elm parts which uses
subscriptions.
Now navigate to a page, which has an elm part, it will set the
subscription. Now navigate away, the subscription will stay. Now navigate
back to it and the component will create a new Elm app with yet another
subscription. Repeat these steps and end up with very many leaked event
handlers.

I created an example here: https://ellie-app.com/3LHDqnYqD4za1/10
(I am simulating navigating away and back with ReactDOM.render and
umountComponentAtNode)

As Elm becomes more and more popular and is increasingly used in SPAs this
can become a problem with performance over a long page lifetime and also
lead to hard-to-debug-behavior, so I think it would be really important to
have some way to "clean up" after Elm with something like `app.kill()`.
Worth noting that the leaky behavior is not that problematic for non-SPAs
because a page reload will always clean up everything.

Does anybody have any thoughts to share about this topic. Having similar
issues or just realized that there might be some when reading this? Would
love to collect some thoughts.

PS: I know one could work around this issue by using ports and shutting
down the subscriptions manually, but I believe that there should a way to
shut the app down from the outside and also that workaround does not work
for the Navigation.program.