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)

## In short:

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

| Phase | What it does | Can it be interrupted? | Where it runs |
|---|---|---|---|
| **Render phase** | Calculates *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 calculation / preparation phase)

Here React **determines which parts of the interface need to be updated**,  
but **does not 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 to **update**,
  - which to **remove**.

Important:  
At this stage **the user does not see any changes**, everything happens "in memory".

### Characteristics:

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

### Example:

If you called `setState(…)`, React **first** creates a new virtual tree,  
but **does not 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 the accumulated changes**:
  - adds/removes/updates real DOM elements;
  - runs effects (`useEffect`, `componentDidMount`, `componentDidUpdate`);
  - calls layout effects (`useLayoutEffect`).

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

### Characteristics:

- This phase **cannot be interrupted** (otherwise the UI would end up in a "half-finished state");
- It runs **very fast**, usually within milliseconds;
- React applies the changes **as a single batch** to avoid flickering.

## An 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 that React is a builder.

| Stage | What React does | Analogy |
|---|---|---|
| Render Phase | Plans *what needs to change*: draws up a new house plan | The architect makes the blueprint |
| Commit Phase | Turns the changes into reality: rearranges the walls and furniture | The builders carry out the renovation per the plan |

## What can and cannot be done in these phases

| Action | Render Phase | Commit Phase |
|---|---|---|
| Calling hooks (`useState`, `useContext`, `useMemo`) | Yes | No |
| Changing the DOM directly | No | Yes |
| Running side effects (`useEffect`) | No | Yes |
| Evaluating JSX | Yes | No |
| Working with layout (`useLayoutEffect`) | No | Yes |

## An 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 | Calculate what needs to be updated | Apply the changes |
| Where it runs | In memory (Virtual DOM / Fiber tree) | In the browser (the real DOM) |
| Can it be interrupted | Yes | No |
| Duration | Can be long | Very short |
| Side effects | Do not run | Run |
| Hooks | useMemo, useState, useContext | useEffect, useLayoutEffect |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.