Unmounting removes a component or application from the DOM and releases the resources that keep it active. It is the cleanup counterpart to mounting: destroy the rendered view, clear stored virtual DOM references, and unsubscribe active listeners. section 9.1.2 section 5.2.5
A reliable unmount operation performs these responsibilities:
- Call destroyDOM() with the saved virtual DOM so the rendered view and its DOM content are removed. section 9.2
- Unsubscribe reducers, render handlers, or other component subscriptions so detached code no longer responds to dispatched changes. section 5.2.5 section 9.1.2
- Clear references such as vdom and host elements, then mark the instance as unmounted. section 9.2 section 12.4
- Reject invalid lifecycle calls, including unmounting an instance that is not mounted. section 9.2 section 12.4
Component cleanup
A minimal component unmount method is: unmount() { if (!this.#isMounted) throw new Error('Component is not mounted'); destroyDOM(this.#vdom); this.#vdom = null; this.#hostEl = null; this.#isMounted = false }. The same pattern scales to an application by unsubscribing its stored subscriptions after destroying the view. section 9.2 section 5.2.5
Listing 9.1 Basic component methods (component.js)
import { destroyDOM } from './destroy-dom'
import { mountDOM } from './mount-dom'
export function defineComponent({ render }) { #1
class Component { #2
#vdom = null
#hostEl = null
render() { #3
return render()
}
mount(hostEl, index = null) {
this.#vdom = this.render() #4
mountDOM(this.#vdom, hostEl, index) #5
this.#hostEl = hostEl
}
unmount() {
destroyDOM(this.#vdom) #6
this.#vdom = null
this.#hostEl = null
}
}
return Component #7
}
Inspect the complete component implementation, including the saved virtual DOM, host element, destroyDOM() call, and cleanup assignments. section 9.2
