Overview

onUpdate(fn) registers a callback on the host's onEachUpdate path. It runs synchronously after every render flush, including the first — before the browser paints.

If fn returns a function, that cleanup runs before the next onUpdate invocation and on unmount.

Unlike onPaint (double rAF after paint), onUpdate is immediate flush timing — good for syncing imperative libraries, not for layout measurement that needs painted geometry.

onUpdate vs onPaint vs onDOMReady

API
Timing
Notes
onUpdate Sync after flush Before paint. Optional cleanup between calls.
onDOMReady Microtask after render DOM in host; every render.
onPaint Double rAF after paint Prefer for getBoundingClientRect.

onUpdate after each flush

Counts render flushes as you type. Runs sync after each update — before paint.

import { html, atom, onUpdate, renderApp } from 'mates';

const Synced = () => {
const value = atom('');
const last = atom('');

// Sync after every render flush, before paint
onUpdate(() => {
const v = value();
if (last() !== v) last.set(v); // guard — avoid update loops
});

return () => html`
<div class="m-col m-gap">
<input
.value=${value()}
@input=${e => value.set(e.target.value)}
placeholder="Type…"
/>
<p class="label">Synced: "${last()}"</p>
</div>
`;
};

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