A Look Behind the Scenes of React & Optimization TechniquesEntry 8 of 10
State Update Batching and Scheduling
React doesn't apply state updates immediately. It queues them and processes all updates from the same event in a single re-render.
Notes
- After calling a setter, the state variable still holds the old value until the next render (React Essentials, Entry 7).
- Multiple setter calls in one event handler are batched into one render. Since React 18, this also applies inside promises, timeouts, and other async callbacks.
- When an update depends on the previous one, use the updater form (
prev => ...). Each updater receives the result of the previous queued update.
Code compare
function handleSetCount(newCount: number) { setChosenCount(newCount); setChosenCount((prev) => prev + 1); // receives newCount, not the old value console.log(chosenCount); // still the OLD value // Both updates are batched: the component re-renders once}Signal writes take effect immediately: this.count.set(5) followed by this.count() returns 5. What Angular batches is the view refresh: several signal changes in one task lead to a single change detection pass.
No Angular code for this example.
Quick reference
| React | Angular |
|---|---|
| Setter queues an update | set() updates immediately |
| Value visible on next render | Value visible right away |
| Updates batched into one render | View refresh batched into one pass |