What if we call set function multiple times in a function?

The set function only updates the state variable for the next render. If you read the state variable after calling the set function, you will still get the old value that was on the screen before your call. Calling the set function does not change the current state in the already executing code:

javascript

It only affects what useState will return starting from the next render.

However, after one click, age will only be 43 rather than 45! This is because calling the set function does not update the age state variable in the already running code. So each setAge(age + 1) call becomes setAge(43). To solve this problem, you may pass an updater function to setAge instead of the next state:

Here, a => a + 1 is your updater function. It takes the pending state and calculates the next state from it. React puts your updater functions in a queue. Then, during the next render, it will call them in the same order:

React always makes sure that for intentional user actions, like clicks, the age state variable is updated before the next click. This means there is no risk of a click handler seeing a “stale” age at the beginning of the event handler.

However, if you do multiple updates within the same event, updaters can be helpful. They’re also helpful if accessing the state variable itself is inconvenient (you might run into this when optimizing re-renders).

1
If the new value you provide is identical to the current state, as determined by an Object.is comparison, React will skip re-rendering the component and its children. This is an optimization. Although in some cases React may still need to call your component before skipping the children, it shouldn’t affect your code.
2
React batches state updates. It updates the screen after all the event handlers have run and have called their set functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use flushSync.
3
Calling the set function during rendering is only allowed from within the current rendering component. React will discard its output and immediately attempt to render it again with the new state. This pattern is rarely needed, but you can use it to store information from the previous renders.

Difficulty: 5/10

Topics: state batching, asynchronous updates, render performance

Scenario Questions

0-2 years experience

1
In a simple counter component, you call setCount(count + 1) twice in a row. What value will be displayed after the function finishes, and why?
2
If you need to increment a value based on the previous state, how would you rewrite the two setState calls to guarantee both increments happen?

2-5 years experience

1
You added two setFormData calls inside an async API callback, but the UI only reflects the second update. Walk me through why the first update was lost and how you’d fix it.
2
During a form submission you notice extra renders caused by multiple state updates in one handler. How would you refactor the code to reduce renders while keeping the logic clear?

5-8 years experience

1
In a large data‑grid component you batch dozens of setRowState calls in response to a WebSocket burst. Explain the performance implications and how you’d redesign the update path to avoid unnecessary re‑renders.
2
Your team is migrating to React 18 concurrent mode and you see different batching behavior for multiple setState calls. How would you audit existing components and decide which need to be rewritten?

8+ years experience

1
At the architecture level, how would you establish a guideline for state updates across multiple teams to prevent hidden bugs caused by improper multiple setState calls?
2
When introducing a global state library (e.g., Redux, Zustand) into a legacy codebase that heavily uses local setState, what strategy would you use to reconcile differing update semantics and ensure consistent UI behavior?

Follow-up Questions

❓What would you see in the UI if you relied on the stale state value after calling setState twice?
❓How does React's concurrent mode affect this batching behavior?
❓When would you prefer useReducer over multiple setState calls?