Why updates cost O(dependents)
There is no virtual DOM and no component re-render.
There is no virtual DOM and no component re-render. A component function runs once. The compiler turns every place a signal is read into a small binding, and a signal write re-runs only the bindings that read it. The cost of a write is the number of its dependents, not the size of the tree.
src/dashboard.tsxtsx
import { useStore } from "@shadow-js/core";
export const writers = { a: (_value: number): void => undefined };
export function Dashboard() {
const [a, setA] = useStore(0);
const [b] = useStore(0);
writers.a = setA;
return (
<div>
<p>{a()}</p>
<p>{b()}</p>
</div>
);
}
A write to a updates exactly one text node and nothing else, which a MutationObserver can count:
The same holds at any size: a signal read in one place of a 10 000-node page still costs one binding. What breaks the property is code that makes a write depend on many things, covered next.