Suggest an edit

Improve this article

Refine the answer for “What does React do when state updates?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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:

1. React calls the **component function again** (`Counter()`).
2. In doing so, it **restores all hooks** (`useState`, `useEffect`, etc.) from the previous Fiber.
3. 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 |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts582 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.