[]previous and next page

Why updates cost O(dependents)

There is no virtual DOM and no component re-render.

For agentsUpdated

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.