What does React do when state updates?

ReactJunior~2 min read

1. The user calls `setState()`

Imagine this code:

javascript

function Counter() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

When the user clicks the button, setCount(count + 1) is called.

2. React creates an "update object"

React does not update state instantly. Instead it:

creates an update object,
stores it in the hook queue (inside the Fiber node of that specific component).

This update holds:

javascript

{
  action: (prevState) => prevState + 1,
  nextState: undefined,
  lane: <update priority>
}

React adds this update to the component's updateQueue.

3. React marks the component as "needing an update"

React sets a flag:

"The Counter component changed, it needs to be re-rendered".

But the re-render does not happen instantly, React waits for the current event or update batch to finish.

4. React combines (batching) all updates

If there are several setState() calls within one event:

javascript

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

React groups them into a single operation, to avoid 3 unnecessary re-renders.

As a result, one render happens, and the state increases by 3.

5. React starts the render phase

When it's time to re-render the component:

React calls the component function again (Counter()).
In doing so, it restores all hooks (useState, useEffect, etc.) from the previous Fiber.
For each useState, React retrieves:

the previous state value,
the update queue,
and computes the new state by applying all updates in order.

In other words, it does something like:

javascript

let newState = oldState;
for (update of queue) {
  newState = update.action(newState);
}

6. React creates a new virtual tree (Virtual DOM)

After recalculating state:

The component returns new JSX.
React creates a new virtual DOM tree (VDOM).
It compares it with the previous tree (diffing).

7. React performs reconciliation

React compares the old and new tree:

if an element did not change, it reuses it,
if it changed, it creates / updates / removes the necessary nodes.

This process is optimized using keys (key), element types, and Fiber structures.

8. React applies the real changes to the DOM

After comparing, React performs the "commit phase":

updates the real DOM elements (via the document API),
calls the useEffect, componentDidUpdate, etc. hooks.

Now the user sees the new value on screen, count has updated.

9. React clears the update queue

After applying the changes, React:

clears the updateQueue,
stores the new state as the current one,
waits for the next setState().

Overall scheme

javascript

setState()
   ↓
Creating the update object
   ↓
Adding it to the Fiber's queue
   ↓
Component is marked for an update
   ↓
Batching (combining updates)
   ↓
New render → recalculating the new state
   ↓
Creating a new Virtual DOM
   ↓
Comparison (diff)
   ↓
Updating the real DOM
   ↓
Running useEffect / lifecycle hooks

Summary

Stage	What React does
setState	Creates an update request
Queue	Puts it in the update queue
Batching	Combines several setState calls
Render	Calls the component again
Diff	Compares the Virtual DOM
Commit	Changes the real DOM elements
Effects	Runs effects and updates hooks

Short Answer

Interview ready

Premium

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