Drills Repository
14 Drills · All Belts · state-snapshots
State updates are snapshots
React state behaves like a fixed snapshot tied to the render it was read in. Calling a set function schedules a future render but does not mutate the current variable inside the still-running event handler, which produces stale reads within that same execution.
State updates are queued for next render
State variables behave like snapshots tied to a specific render. Calling a state setter queues a future render, but it does not mutate the current render's state variable.
Alert placement after setState
Within a single render's event handler, state variables are fixed snapshots. Calling setWalk schedules a future render but does not change the current walk value seen by the handler.
Async callback captures render snapshot
Event handlers and callbacks close over the state values from the render in which they were created, preserving that snapshot even in delayed execution. A setTimeout callback therefore still references the old value of number, regardless of when it actually runs.
Functional updater accumulates queued updates
Functional updater callbacks are queued and processed sequentially during the next render, with each updater receiving the result computed by the previous one. This produces a chained result of 1, then 2, then 3, unlike passing a plain value to each call.
Multiple direct state updates collapse
Each setAge(age + 1) call in the same event handler reads the identical age value captured at that render, so React batches all three calls into a single update using the last queued value. Unlike updater functions, direct value calls do not build on each other sequentially.
Event handlers belong to a render snapshot
Every render creates a new set of event handlers tied to that render's props and state values. These handlers close over the snapshot of state from their specific render.
React batching in event handlers
React batches state updates during event handlers and waits until the handler completes before processing them together. This improves performance and avoids intermediate "half-finished" renders.
Async stale state in delayed updates
The async handler closes over the state snapshot from the render where the click happened. After the delay, pending still refers to the old value, so decrementing can apply incorrect math like 0 - 1.
Purity of updater functions
Updater functions run during rendering and React may invoke them more than once in development Strict Mode to detect mistakes. Because rendering must stay pure, updater functions should only calculate and return the next state.
Multiple setState calls with stale snapshot
Each call within a single event handler uses the same state snapshot captured at that render. Since number is 0 throughout the handler, all three setNumber(number + 1) calls resolve to the identical value of 1 rather than accumulating.
Updater functions queue sequentially
React queues updater functions and applies them in order during the next render. Each updater receives the latest pending state from the previous updater, so the values chain from 42 → 43 → 44 → 45.