Why doesn't setState update state immediately?

ReactJunior~2 min read

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:

Stores your update request in an internal queue.
Does not update immediately, but schedules an update of the component.
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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.