← AFW 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 AFW, 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

A signal write runs its dependent computations rather than visiting an entire virtual DOM tree. The cost depends on those computations: changing one text binding is small, while changing a list can still scan and reconcile its items.

Last updated on