useState: hook slots, snapshots and batching

The judge works only from the case file printed that morning. Motions filed during the hearing go into the clerk's tray. At session close the clerk processes the tray in order and prints one new file.

In the analogy	In React
The printed case file the judge reads all session	This render's state snapshot
Filing a motion puts it in the tray; the printed file does not change	A setter queues an update; the variable does not change
"Set the count of exhibits to 4", written after reading 3 in the printed file	setX(x + 1): a replacement value computed from the snapshot
"Add one to whatever the count is when this motion is processed"	setX(n => n + 1): an updater applied to the pending value
The clerk processes the whole tray at session end, in order, and prints once	Batching: one queue pass and one render per batch
A motion that leaves the file exactly as it was produces no new print for the courtrooms	The Object.is bailout: children are not re-rendered

Breaks down when:

• A clerk judges whether two files say the same thing; React compares identity (Object.is). Wrong inference: "a copied object with equal fields is skipped."
• A clerk opens nothing for a no-change motion; React may call the component once before bailing out. Wrong inference: "an equal set never runs the component body."

Contrasting case: a shared spreadsheet cell edited live: the next reader sees the write, with no tray and no reprint. That is a ref (useRef().current): reads see writes at once, and nothing re-renders.

In real terms: setters enqueue updates on the component's hook, React processes the queue after the current code finishes and renders once, and each render's handlers read that render's state.

Example 1: ExamHall EXH-418, "a double-click on Flag for review counts as 1"

async function onFlag() {
  await saveFlag('Q7');                 // setTimeout-backed promise, 10 ms
  setFlagged(flagged + 1);              // BUG. MR !702: setFlagged(n => n + 1)
  log.push(`after setter, this handler still sees flagged=${flagged}`);
}

BUG  setFlagged(flagged + 1):
  render flagged=0
  after setter, this handler still sees flagged=0
  after setter, this handler still sees flagged=0
  render flagged=1
  screen: Flagged: 1
FIX  setFlagged(n => n + 1):
  render flagged=0
  after setter, this handler still sees flagged=0
  after setter, this handler still sees flagged=0
  render flagged=2
  screen: Flagged: 2

The snapshot survives the await (step 2); the updater fixes the count (step 4).

Example 2: chat header, batching outside React events and the bailout

Runs without act(), so render counts are the real scheduler's. ChatHeader holds unread and typing and renders a child, MessageList.

setTimeout(() => { setUnread(u => u + 1); setTyping(true); }, 0);              // A
(async () => { await Promise.resolve(); setUnread(u => u + 1); setTyping(false); })(); // B
setTimeout(() => setTyping(false), 0);  // C, then D: typing is already false

A timeout: setUnread(u => u + 1) + setTyping(true) -> ChatHeader renders: 1, MessageList renders: 1 | screen: unread=1 typing=true
B promise: await, then setUnread(u => u + 1) + setTyping(false) -> ChatHeader renders: 1, MessageList renders: 1 | screen: unread=2 typing=false
C same value: setTyping(false) while typing is false -> ChatHeader renders: 1, MessageList renders: 0 | screen: unread=2 typing=false
D same value again: setTyping(false) -> ChatHeader renders: 0, MessageList renders: 0 | screen: unread=2 typing=false

A and B: two setters in a timeout, or after an await, give one render (step 5). C: an equal value called ChatHeader once but skipped its child; D did no work (step 6).