33. Virtual DOM reconciliation vs fine-grained reactivity (signals)

Two competing strategies for "when data changes, update the DOM efficiently":

Virtual DOM (React, Vue 2, Preact): on every state change, re-run the component function to produce a new lightweight JS-object tree, diff it against the previous tree, and apply only the minimal set of real DOM mutations found by the diff.

// Simplified idea of what a VDOM diff does conceptually
function diff(oldVNode, newVNode) {
  if (oldVNode.type !== newVNode.type) return replace(oldVNode, newVNode);
  const patches = diffProps(oldVNode.props, newVNode.props);
  const childPatches = diffChildren(oldVNode.children, newVNode.children);
  return { patches, childPatches };   // apply only these to the REAL DOM
}

Cost: re-running the whole component function and diffing is wasted work proportional to component size, even for a one-character text change — this is why React.memo/useMemo/shouldComponentUpdate exist, as manual escape hatches from re-running work the framework can't otherwise know is unnecessary.

Fine-grained reactivity (Signals — Solid, Vue 3's reactivity core, Svelte 5, Angular Signals): instead of diffing trees, the framework tracks exactly which DOM nodes depend on which piece of state at setup time, so a state change updates only that specific text node or attribute directly — no diffing, no re-running unrelated code.

// Solid-style signal: reading count() inside the JSX registers a fine-grained
// dependency; updating it patches ONLY the text node that read it — nothing
// else in the component ever re-runs.
const [count, setCount] = createSignal(0);
return <button onClick={() => setCount(count() + 1)}>Count: {count()}</button>;

Neither is universally "faster" in every case, but signals eliminate an entire category of "why is this unrelated component re-rendering" bugs and manual-memoization boilerplate by construction — it's the direction most new frameworks (and React's own compiler work) have moved toward since ~2023.