Elm 0.19.1 port subscription cleanup – should the runtime handle it automatically?

Answer

In Elm 0.19.1 the runtime does not automatically unsubscribe JavaScript ports when an Elm component that created them is removed from the DOM. The port remains alive until the entire Elm program terminates, so developers must explicitly close it if the component may be unmounted.

Current Guarantee

Only program termination triggers automatic port cleanup. Unmounting a subtree does not affect any ports that were created in that subtree, even if the Elm view no longer renders the element that hosts the port.

Trade‑offs of Automatic Cleanup

• Performance: The runtime would need to track DOM nodes and their associated ports, adding bookkeeping overhead in every unmount.
• Compatibility: Many existing applications rely on manual closure or on the program’s exit to release resources; automatic cleanup would silently change that contract and could break legacy code.
• Developer ergonomics: Some patterns intentionally keep a port alive beyond a component’s lifetime (e.g., a global analytics tracker). Automatic cleanup would interfere with such use cases.

Impact on Existing Patterns

Patterns that keep a port alive after a component is removed (for example, a shared analytics port that lives in a top‑level component) would break if the runtime started tearing them down automatically. Developers would need to refactor those patterns to either keep the component alive or to manage the port’s lifecycle manually.

Recommended Practice

1. When creating a port in Elm, keep a reference to the subscription in JavaScript.

   const sub = Elm.Main.init({ node, flags }).ports.myPort.subscribe(data => {
     // handle data
   });

2. Expose a JavaScript function that the Elm component can call when it is about to be destroyed.

   function closeMyPort() {
     sub.unsubscribe();
   }

3. In the Elm component’s onDestroy (or equivalent) call that JavaScript function.

   onDestroy: () => {
     return [Js.send("closeMyPort", null)];
   }

4. For Browser.element applications, the Elm runtime automatically closes all ports when the program exits, but not on component unmounts. Use the explicit unsubscribe pattern if early cleanup is needed.

Verification Steps

• Open Chrome DevTools, go to the Memory panel, and observe whether a port’s callback is still invoked after you remove the Elm component’s DOM node.
• Check the JavaScript console for any logs you added to confirm the callback is no longer called.

Missing Diagnostic Detail

If you are using Browser.element or a custom Elm runtime wrapper, let us know so we can refine the guidance for that scenario.