Suggest an edit

Improve this article

Refine the answer for “commit phase VS render phase”. 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)

## Short answer:

React goes through **two phases of updating the interface**:

| Phase | What it does | Can it be interrupted? | Where it runs |
|---|---|---|---|
| **Render phase** | Computes *what needs to be updated* (builds a new virtual tree) | Yes | In memory (Virtual DOM) |
| **Commit phase** | Applies these changes *to the real DOM* | No | In the browser (DOM) |

---

## 1. Render Phase (the computation / preparation phase)

Here React **determines which parts of the interface need to be updated**,
but **doesn't touch the DOM yet**.

### What happens:

- React calls the components (or `render()` for class ones);
- builds a new **tree of Fiber nodes** (a virtual tree);
- compares it with the old tree (**diffing algorithm**);
- decides which nodes:
  - need to be **created**,
  - which need to be **updated**,
  - which need to be **removed**.

Important:
At this stage **the user sees no changes** - everything happens "in memory".

### Features:

- React can **pause** this phase (asynchronous rendering);
- can **restart** it from scratch (if, for example, new data arrives);
- can **change the priority of tasks** (user input is more important than a list update).

### Example:

If you called `setState(…)`, React **first** creates a new virtual tree -
but **doesn't update the DOM right away**.

---

## 2. Commit Phase (the application phase)

Here React **makes the real changes to the DOM**
and calls the corresponding lifecycle hooks.

### What happens:

- React **applies all accumulated changes**:
  - adds/removes/updates real DOM elements;
  - runs effects (`useEffect`, `componentDidMount`, `componentDidUpdate`);
  - calls layout effects (`useLayoutEffect`).

Once the commit phase finishes, the user **sees the updated UI**.

### Features:

- This phase **cannot be interrupted** (otherwise the UI would end up in a "half state");
- Runs **very quickly** - usually within milliseconds;
- React applies changes **in one batch** to avoid flicker.

---

## Illustration of the process

```javascript
setState() → the Render phase begins
   ↓
React calls the components → creates a new Virtual DOM
   ↓
React compares the old and new tree (diffing)
   ↓
Decides what to update, remove, add
   ↓
(can be paused / resumed)
   ↓
Render phase finished → the Commit phase begins
   ↓
React makes the real changes to the DOM
   ↓
useLayoutEffect and useEffect run
   ↓
The user sees the updated UI
```

---

## The difference through an analogy

Imagine React is a builder

| Stage | What React does | Analogy |
|---|---|---|
| Render Phase | Plans *what needs to change*: draws up a new house plan | An architect makes a blueprint |
| Commit Phase | Turns changes into reality: moves the walls and furniture | Builders do the renovation according to the plan |

---

## What you can and cannot do in these phases

| Action | Render Phase | Commit Phase |
|---|---|---|
| Call hooks (`useState`, `useContext`, `useMemo`) | Yes | No |
| Change the DOM directly | No | Yes |
| Run side effects (`useEffect`) | No | Yes |
| Compute JSX | Yes | No |
| Work with layout (`useLayoutEffect`) | No | Yes |

---

## Example with hooks:

```javascript
function Example({ count }) {
  useEffect(() => {
    console.log('useEffect - Commit phase');
  });

console.log('Component render - Render phase');

return <div>{count}</div>;
}
```

**When** `count` **updates:**

- First React calls the component (`Render phase`);
- Then it updates the DOM (`Commit phase`);
- After that it runs `useEffect`.

---

## Summary

| Parameter | Render Phase | Commit Phase |
|---|---|---|
| Goal | Compute what needs to be updated | Apply the changes |
| Where it runs | In memory (Virtual DOM / Fiber tree) | In the browser (the real DOM) |
| Can be interrupted | Yes | No |
| Duration | Can be long | Very short |
| Side effects | Don't run | Run |
| Hooks | useMemo, useState, useContext | useEffect, useLayoutEffect |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.