OTF Web Blog
How fine-grained signals work

How fine-grained signals work

A look at the reactive graph that updates only the DOM nodes a change touches.

A signal is a value plus the set of computations that read it. When the value changes, only those computations re-run — and in OTF Web, a computation is often a single DOM update.

JSX
let count = $state(0);
const doubled = $derived(count * 2);

Reading count inside a binding subscribes that binding to it. Reassigning count notifies precisely its subscribers — doubled, and any DOM node displaying either value. No other part of the page is visited.

This is the substance of the zero-VDOM model: the dependency graph already records what must be updated, so there is nothing to diff.

Why it matters

Without diffing there is no per-update reconciliation pass whose cost scales with the size of the view. Update cost scales with what actually changed.