Render and commit

In the analogy	In React
A client's change request reaches the practice	A trigger (setState, a parent render, context)
Revising one sheet obliges redrawing every sheet bound beneath it, unless a sheet is stamped "reuse if its inputs are unchanged"	A parent render re-renders its children, unless they are memo with equal props
Drawings are paper only. A draft can be binned and never reach the site	Render is pure and may be discarded
The crew lays the new set over the previous set and builds only what differs	Commit diffs the new tree against the previous one and writes only the differences
The snagging inspection happens before the client is let in	Layout effects run before paint
Utility hookups are booked after handover	useEffect runs after commit

Breaks down when:

• A crew could inspect the building, but React diffs drawings only. It misses manual DOM edits, so "React will fix my DOM edit" is wrong.
• Redrawing sounds costly, but a render is a function call: CPU time, not DOM work.

Contrasting case: a sign painter who repaints the lobby sign on every change, like imperative el.textContent = … per tick. There is no draft and no diff, so every write reaches the DOM.

In real terms: render computes a new element tree, and commit reconciles it against the previous tree and mutates only the DOM nodes that changed.

E1 · ExamHall: the timer tick re-renders the whole question panel (EXH-363)

function Badge({ secondsLeft }) { c.badge++; return h('span', { id: 'timer' }, fmt(secondsLeft)); }
const Pane = ({ q }) => { c.pane++; return h('section', { className: 'pane' }, q.text); };
function ExamPage() {
  c.page++;
  const [s, setS] = useState(5400); tick = () => setS((x) => x - 1);
  return h('main', null, h(Badge, { secondsLeft: s }), questions.map((q) => h(Pane, { key: q.id, q })));
}

Per tick, development build (the second number in each cell is StrictMode on):

Variant	ExamPage	TimerBadge	QuestionPane	DOM writes
baseline (above)	1 / 2	1 / 2	60 / 120	text "90:00"->"89:59"
memo(Pane)	1 / 2	1 / 2	0 / 0	same single text write
memo(Pane) but q rebuilt with { ...q } each render	1 / 2	1 / 2	60 / 120	same single text write
state moved down into TimerBadge (MR !658)	0 / 0	1 / 2	0 / 0	same single text write

Renders range from 0 to 120, but the DOM work is always one text node.

E2 · ExamHall: the order inside a commit

TimerBadge logs its render, a useLayoutEffect that reads the DOM and books a requestAnimationFrame, and a useEffect. Update log (after [update: …]):

click, StrictMode off:  render 89:59 > layout cleanup > layout effect (DOM: 89:59) > effect cleanup > effect (DOM: 89:59) > MutationObserver 1 rec > rAF
click, StrictMode on:   render 89:59 > render 89:59 > layout cleanup > layout effect (DOM: 89:59) > effect cleanup > effect (DOM: 89:59) > MutationObserver 1 rec > rAF
setTimeout, off, either: (setState returned) > render 89:59 > layout cleanup > layout effect (DOM: 89:59) > MutationObserver 1 rec > effect cleanup > effect (DOM: 89:59) > rAF
                     or: (setState returned) > render 89:59 > layout cleanup > layout effect (DOM: 89:59) > MutationObserver 1 rec > rAF > effect cleanup > effect (DOM: 89:59)

The layout effect always sees the new DOM. After a setTimeout trigger, useEffect and the next frame (rAF) come in either order; which one comes first varies by build and load.

E3 · Proof domain, chat: re-render ≠ DOM change

Thread owns 20 messages. MessageRow is not memoized.

StrictMode=off | poll, equal copies: Thread 1, MessageRow 20, DOM none | same state (prev => prev): Thread 1, MessageRow 0, DOM none | same state again: Thread 0, MessageRow 0, DOM none | one new message: Thread 1, MessageRow 21, DOM childList +1/-0
StrictMode=on  | poll, equal copies: Thread 2, MessageRow 40, DOM none | same state (prev => prev): Thread 2, MessageRow 0, DOM none | same state again: Thread 0, MessageRow 0, DOM none | one new message: Thread 2, MessageRow 42, DOM childList +1/-0

Equal copies cost 20 renders and zero DOM writes. The first same-state update still called Thread once, then skipped its children; the second bailed out completely.