You call setCount every day. You type setCount(count + 1) and the counter goes up. Between your click and that new number on screen, something real happens — and if you're honest with yourself, you've never had to say exactly what.

Over the next seven screens you'll rebuild that something, from nothing. Each screen hands you a tool you don't have yet and a job that tool can't do. What you invent to get past the wall turns out to be a piece of React's update machinery — we won't name it until the end.

Start with the crudest handler there is. Log count. Call setCount(count + 1). Log count again. You expect 0, then 1. Tap the button below. You see 0, then 0. The number on screen eventually changes — the counter ticks up on the next render — but INSIDE the handler, count refuses to move. Whatever the setter is doing, it is not “overwrite `count` right now.” So what is it doing?

FIG. 1 — THE COUNTER BENCH
counter0render #1
console
empty — tap the button
— tap, log, watch the photo refuse to move —

Tap +1. Watch both log lines print the SAME number — the one that was there when the click started. The counter above will tick up eventually (look at render #), but the handler's count refuses to follow. Tap again. Same story: the first log = the photo at click-time, the second log = still that photo.

Tap it a couple of times. Let the surprise sink in. Nothing you do INSIDE the handler changes count.