Drills Repository
14 Drills · All Belts · state-snapshots
Reading State Immediately After Calling a Setter
React state behaves like a fixed snapshot tied to the render it was read in. Calling setCount(count + 1) schedules a future render but does not change the local count value already captured inside the running click handler, so the log immediately afterward still shows the original 0.
Logging State Right After Calling Its Setter
State variables behave like fixed snapshots that belong to one specific render and never change again after that render starts. Calling setCount(count + 1) schedules a future render, so the log right after it still reads the count value from the current render.
Alert placement after setState
Within a single render's event handler, every state variable behaves as a fixed snapshot that cannot change until the next render begins. Calling setWalk(!walk) schedules a future render, so the walk value the alert reads stays whatever it was when this render started.
Chaining Multiple useState Updater Calls
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.
Reading State Inside a Delayed Callback
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.
Three Functional Updater Calls in One Handler
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.
Three Direct State Updates in a Single Handler
Multiple direct state-setter calls within one event handler all read the same snapshot value captured at that render, so React batches them into a single update using only the last queued value. Since all three setAge(age + 1) calls read the same age of 42, the render displays 43, not a result built by chaining each update onto the last.
Three Direct setNumber Calls in One Click Handler
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.
Event Handlers Across Multiple Component Renders
Every component render creates a brand-new set of event handler functions, each one closing over that specific render's props and state values. Because each handler is frozen to its own render, two handlers created in different renders can read entirely different values for the same variable.
React batching in event handlers
React batches every state update triggered inside a single event handler and waits until that handler finishes running before recalculating anything. Processing all the updates together afterward avoids rendering the component multiple times with only some of the state changes applied.
Async Click Handler With A Delay
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.