Why useState Doesn’t Update Immediately (And Why That’s a Good Thing)

One of the first confusing moments in React usually comes from something that looks completely normal.

You write this:

setCount(count + 1);
console.log(count);

And you expect the updated value.

But instead, you still get the old one.

At that point, it feels like:

“state is asynchronous”

Which is not entirely wrong—but also not the full picture.

What’s Actually Happening

When you call setCount, React doesn’t immediately change the value.

Instead, it does something else:

• it queues the update
• waits
• then re-renders the component

So inside the same render, nothing changes yet.

The new value only exists in the next render.

Thinking in Renders Instead of Variables

This is where the mental shift happens.

Each render has its own snapshot of state.

// Render 1
count = 0

// Render 2
count = 1

When you call:

setCount(count + 1);

You’re not updating the current value.

You’re telling React:

“Next time you render, use this new value”

Why This Code Only Adds Once

setCount(count + 1);
setCount(count + 1);

At first glance, it looks like it should add twice.

But both lines are using the same snapshot:

count = 0

So React sees:

setCount(1);
setCount(1);

And the final result becomes:

count = 1

The Role of Functional Updates

To fix this, React provides another form:

setCount(prev => prev + 1);
setCount(prev => prev + 1);

Here, prev is not tied to the render.

It represents the latest value at the moment React processes the updates.

So React evaluates it step by step:

• first update → 0 → 1
• second update → 1 → 2

Now the final result becomes:

count = 2

Batching: Why React Doesn’t Re-render Twice

Another surprising behavior is this:

Even if you call multiple updates, React usually renders only once.

setCount(c => c + 1);
setName("John");

You might expect two renders.

But React does this instead:

• queue both updates
• calculate the final state
• render once

Why React Works This Way

If React rendered after every update, it would be inefficient.

Instead of:

update → render
update → render

React batches them:

update
update
render once

This keeps your app faster and more predictable.

Putting It All Together

There are two key ideas behind this behavior:

1. State updates are scheduled, not immediate
2. Multiple updates are batched into a single render

And the difference between these two lines:

setCount(count + 1);

and

setCount(prev => prev + 1);

comes down to when the value is read.

A Better Way to Think About It

Instead of thinking:

“I am changing the value”

Think:

“I am requesting a new render with updated state”

Final Takeaway

State in React is not like a normal variable.

It doesn’t change instantly, and it doesn’t belong to the current execution.

It belongs to the next render.

Once you see it this way, behaviors that once felt confusing start to feel completely logical.