Suggest an editImprove this articleRefine the answer for “Why doesn't setState update state immediately?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`setState`** (or `setCount`, `setValue`, etc.) does not update state right away, because React performs updates **asynchronously and in batches (batched)** to improve performance and avoid unnecessary re-renders. **Key point:** the new value appears only on the next render of the component - in `useEffect`, in the UI, or through the functional form of `setState`.Shown above the full answer for quick recall.Answer (EN)Image## Short answer `setState` (or `setCount`, `setValue`, etc.) **does not update state immediately**, because React performs updates **asynchronously and in batches (batched)** to improve **performance** and **avoid unnecessary re-renders**. --- ## What happens under the hood When you call: ```javascript setCount(count + 1); console.log(count); // old value! ``` You do not see the new value, because React: 1. Stores your **update request** in an internal queue. 2. Does not update immediately, but **schedules an update** of the component. 3. Applies all accumulated changes in **one render**, a bit later (at the end of the event, effect, or on the next frame). --- ## Example ```javascript function Counter() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); console.log(count); // old value }; useEffect(() => { console.log("Updated:", count); // new value }, [count]); return <button onClick={handleClick}>{count}</button>; } ``` Inside `handleClick`, `console.log` prints the old value, but in `useEffect` (after the update) it is already the new one. --- ## Why React does this ### 1. Performance optimization If React updated the component instantly on every `setState`, and you had, say, 10 calls in a row, it would re-render the component 10 times. Instead, React **batches** all updates: ```javascript setCount(c => c + 1); setCount(c => c + 1); setCount(c => c + 1); ``` -> everything runs in **one render**, and `count` becomes `+3`. --- ### 2. The asynchronous nature of rendering (Fiber) React 18+ uses **concurrent** rendering: - it can **pause**, **merge**, and **defer** updates; - it decides **when it is safe to update** the UI, so it does not block the interface. That is why `setState` is a **request for an update**, not an immediate data change. --- ### 3. Predictability and clean code React always re-renders the component **from scratch**, taking the **new state** from its internal queue. If `setState` changed the value instantly, you could accidentally use "half-updated" data. --- ## Summary | Question | Answer | |---|---| | Why isn't `setState` instant? | Because React updates state **asynchronously** and **in batches** | | What does React do on `setState`? | It puts the update in the queue and schedules a re-render | | When does the new value appear? | On the next re-render of the component | | Where can you see the new value? | In `useEffect`, in the UI, or in the `setState` callback | --- ## A tricky point If you need to update state **based on the previous one**, always use the **functional form**: ```javascript setCount(prev => prev + 1); ``` This way React guarantees you get the **current** state, even if there are several updates and they run as a batch.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.