onAllMount

Callback fired after all nested children have mounted.

import { html, atom, onAllMount, x, renderApp } from 'mates';

const Child = () => () => html`<div>child</div>`;

const Dashboard = () => {
  const ready = atom(false);

  // Fires once after Dashboard + every descendant has mounted
  onAllMount(() => {
    ready.set(true);
  });

  return () => html`
    <div>
      ${x(Child, {})}
      ${x(Child, {})}
      <p>${ready() ? 'All children mounted' : 'Waiting…'}</p>
    </div>
  `;
};

renderApp(Dashboard, document.getElementById('app'));

Overview

onAllMount(fn) registers a callback that runs once after the current component and every descendant have finished their initial mount. Internally it uses the scheduler's idle queue (onceIdle), so it fires when the subtree is fully registered.

Unlike onMount, which runs as soon as this component's DOM is ready (children may still be mounting), onAllMount waits for the whole tree. That makes it the right hook for analytics “time to interactive”, layout passes that measure child nodes, or enabling features that depend on child readiness.

If fn returns a function, that cleanup is registered and runs on unmount — same pattern as sync onMount.

onMount vs onAllMount

API	Waits for children?	Use when
`onMount(fn)`	No	This component's DOM is ready. Self-contained setup, timers, focus.
`onAllMount(fn)`	Yes — entire subtree	Analytics, layout that needs child DOM, feature gates after hydration.

onAllMount — wait for all children

The Dashboard's onAllMount callback fires only after Widget A, B, and C have all completed their own onMount. This guarantees the entire subtree is hydrated before the callback runs.

import { html, atom, onMount, onAllMount, x, renderApp } from 'mates';

const ChildWidget = (propsFn) => {

const ready = atom(false);

onMount(() => {

setTimeout(() => ready.set(true), Math.random() * 600 + 200);

});

return () => html`

<span>${propsFn().name}</span>

${ready() ? 'ready' : 'loading...'}

</span>

</div>

};

const Dashboard = () => {

const allReady = atom(false);

onAllMount(() => {

allReady.set(true);

});

return () => html`

<h2 class="m-0">Dashboard</h2>

${x(ChildWidget, { name: 'Widget A' })}

${x(ChildWidget, { name: 'Widget B' })}

${x(ChildWidget, { name: 'Widget C' })}

${allReady() ? '✓ All children mounted' : 'Waiting for children...'}

</div>

API — onAllMount

import { onAllMount } from 'mates'

Prop / Option	Type	Default	Description
`onAllMount(fn)`*	`void`	—	Registers a callback that fires after this component and every descendant have completed their initial mount. Uses the scheduler idle queue (onceIdle). Must be called in the outer (setup) function.
`onAllMount(() => cleanup)`	`void`	—	If fn returns a function, that cleanup runs when the component unmounts — same pattern as sync onMount.

Comparison with onMount

Prop / Option	Type	Default	Description
`onMount(fn)`	`void`	—	Fires after this component's DOM is ready, but before child components have necessarily mounted. Use for self-contained setup.
`onAllMount(fn)`	`void`	—	Fires after the entire component subtree has mounted. Use when logic depends on child DOM or child component state being fully initialized.

SSR

Prop / Option	Type	Default	Description
`onAllMount`	`no-op`	—	Skipped entirely on the server — fake hosts are never connected and idle work is not scheduled.