Lifecycles & related patterns

[justin-schroeder]

We definitely need an "unmount" mechanism in Arrow itself(coming soon) but beyond that I'm keenly aware of how quickly bundle size will bloat when we start adding many features. While unmount is important for garbage collection reasons we may not need Arrow itself to have any other lifecycle methods — part of this "experiment" is attempting to find elegant patterns in Native JS — so here’s a thread intended to help us explore other non-first-party patterns that could replicate traditional lifecycle events.

A MutationObserver, just as an example, would be sufficient to handle the mounted events, but we’d want to an elegant pattern to make it more approachable.

[jeanwl]

I have been using setTimeout to handle the mounted event in my latest project.
Here is a simple example to manage the lifecycle of a <dialog>: https://jsfiddle.net/jeanwll/ntmgdh3q/

The pattern looks like this:

class Component {
    data = reactive({
        render: false
    })

    render() {
        if (!this.data.render) return this.onBeforeUnmount()

        setTimeout(() => this.onMount())

        return html``
    }
}

[irskep]

If you're suggesting people create MutationObservers to handle edge cases or "onmount," I'm sorry to report the debugging experience is dismal. Chrome seems to have a bug where it will just stop firing your MutationObserver callbacks after a random amount of time, until you fully close and reopen the page. (Either that, or I am extremely confused about what's going on.) I would strongly prefer not to rely on this API to accomplish anything because it's so frustrating to work with, and tricky to figure out how to run code under commonly desired conditions.