use:disconnected

Element attribute that runs its callback just before the element is removed from the document. Useful for tearing down non-reactive subscriptions tied to the live DOM — for reactive-scope teardown, prefer cleanup. Accepts a single callback or an array of callbacks; each receives the element.

The callback is registered as a cleanup on the surrounding reactive scope, so it fires when that scope disposes — when the component unmounts or its owning render call is disposed.

Arguments

name	type	description
value	fn | fn[] (any depth)	function(s) called with the element just before it is removed

Examples

Tear down on unmount

The callback runs just before the element leaves the document — a good place to detach a non-reactive subscription bound to the live node.

import { render, signal } from 'pota'
import { Show } from 'pota/components'

function App() {
	const show = signal(true)
	const log = signal('')

	return (
		<div>
			<button on:click={() => show.update(v => !v)}>
				mount / unmount
			</button>
			<Show when={show.read}>
				<main
					use:disconnected={node => {
						log.write(`${node.tagName} about to unmount`)
					}}
				>
					Content
				</main>
			</Show>
			<p>{log.read}</p>
		</div>
	)
}

render(App)

Fires when the scope disposes

Disposing the render call disposes the owning scope, which runs the registered cleanup — so the use:disconnected callback fires.

import { render, signal } from 'pota'

const log = signal('')

function App() {
	return (
		<main
			use:disconnected={node => log.write(`${node.tagName} disposed`)}
		>
			Content
		</main>
	)
}

const dispose = render(App)

// the log lives outside the disposed tree, so it survives to show
// the message
render(
	<div>
		<button on:click={dispose}>dispose</button>
		<p>{log.read}</p>
	</div>,
)