Why setState is delayed in React JS

Why setState Feels Delayed in React (And What You Can Do About It)

Hey everyone! If you’ve just started coding in React—creating components and managing state—I’m pretty sure you’ve run into this common issue:

You update the state using setState, and in the very next line, you're expecting the new value, right?

const [count, setCount] = useState(1);

const handleCount = () => {
  setCount(prev => prev + 1);
  console.log(count); // This won't log what you're expecting! It will still log the old value which is 1
};

Let’s explore why this happens and how you can deal with it effectively.

1. React is More Optimized Than You Might Think

React is designed with performance in mind. Every time a state changes, React re-renders the component to reflect that new changed value in the UI. It was very basic core of why react developed.

Now imagine calling setState multiple times in quick succession. Without optimization, this would trigger multiple re-renders—slowing things down and creating unnecessary work for the browser.

To avoid this, React batches these updates together and applies them all in a single re-render.

Yes, you heard that right! Under the hood, React uses a queue system to handle state updates. All state updates in an event handler are first queued, and only after that handler finishes, React processes them and re-renders the component.

You can think of it like ordering food at a restaurant. When you tell the waiter multiple items, they don’t rush to the kitchen after each one—they take the complete order first, then go and get everything. Similarly, React waits to collect all state updates, and then performs a single re-render.

This helps minimize unnecessary renders.

For example:

const handleCount = () => {
  setCount(prev => prev + 1);
  setCount1(prev => prev + 1);
  setCount2(prev => prev + 1);
};
console.log("Component rendered");

In this case, although you're updating three states, React renders the component only once—because all the updates are batched together.

So yes, setState may feel delayed, but it’s actually a smart performance feature.

2. But What If You Want the Updated Value Immediately?

If you need to use the updated value right after setting it, here’s a simple workaround:

const handleCount = () => {
  setCount(prev => prev + 1);
  const updatedCount = count + 1; // Use this if you need the "new" value immediately
  console.log(count); // This still shows the old value
};

Here, you can manually calculate the updated value and use it where needed. But remember, the actual state (count) will still update asynchronously as scheduled by React.

Recap

1. React batches state updates for performance reasons.
2. State doesn’t update immediately after setState—it updates on the next render.
3. Use functional updates (prev => prev + 1) when depending on the previous state.
4. Don’t expect updated values immediately in the same function body.
5. Use useEffect if you need to react to state changes after re-render.

✅ Final Thoughts

React’s state handling may seem tricky at first, but it’s optimized for performance. Understanding why setState feels delayed will help you write better and more predictable code.

Hope this clears things up—**happy learning! 🚀