Suggest an edit

Improve this article

Refine the answer for “What are "commit phase" and "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)

React components go through **two main stages when updating the UI**:

> **Render phase**
> **Commit phase**

---

## The overall picture

When React decides to update the interface (for example, after a `state` or `props` change), it does not touch the DOM right away.
Instead, React goes through **two stages**:

```javascript
┌──────────────┐
│ Render phase │ -> compute *what needs to change*
└──────────────┘
        v
┌──────────────┐
│ Commit phase │ -> apply the changes to the DOM
└──────────────┘
```

---

## 1. Render phase

### What it does:

- Calls your **components as functions** (`function MyComponent() {...}`).
- Builds a **new virtual tree (Virtual DOM)**.
- Compares the new tree with the previous one (the "reconciliation" process).
- Determines **exactly which changes need to be made to the real DOM**.

### Important:

- During this phase, React **does not change the DOM**.
- It can be **interrupted** or **redone** (in React 18, with concurrent rendering).
- It runs **synchronously** or **asynchronously** depending on the mode (legacy/concurrent).

### Hooks called **during the render phase**:

- `useMemo()`
- `useCallback()`
- `useContext()`
- `useState()` (returns the current value)
- the call to the component function itself (JSX is returned)

### Side effects (`useEffect`) are not called - they are **deferred** to the commit phase.

---

## 2. Commit phase

### What it does:

- Takes the result of the render phase (the diff between the old and new tree).
- **Applies the actual changes to the DOM**.
- **Runs all effects** (`useLayoutEffect`, `useEffect`) and lifecycle methods (`componentDidMount`, `componentDidUpdate`).

### Stages inside the commit phase:

1. **Before mutation phase** - `getSnapshotBeforeUpdate()` is called (in classes).
2. **Mutation phase** - React updates the DOM (adds/removes/changes nodes).
3. **Layout phase** - React calls:
  - `useLayoutEffect` (cleanup of the previous one first, then the new ones)
  - `componentDidMount` / `componentDidUpdate`
4. **Passive effects phase** - React calls:
  - `useEffect` (asynchronously, after the screen repaints)

---

## Example

```javascript
function Example({ count }) {
  useEffect(() => {
    console.log('useEffect'); // called during the commit phase
  });

console.log('render'); // called during the render phase

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

If `count` changed:

1. React calls `Example()` -> **render phase**
`console.log('render')`
2. React applies the changes to the DOM -> **commit phase**
3. Then it calls `useEffect` ->
`console.log('useEffect')`

---

## Key differences

| Characteristic | Render phase | Commit phase |
|---|---|---|
| Goal | Determine *what needs to be updated* | Apply the changes |
| DOM work | No | Yes |
| Can be interrupted | Yes | No |
| Effects (`useEffect`) | No | Yes |
| `useLayoutEffect` | No | Yes |
| Calling component functions | Yes | No |
| Synchronicity | Can be asynchronous | Always synchronous |

---

## Summary

- The **render phase** is React computing *what needs to change* (pure, no side effects).
- The **commit phase** is React *applying the changes* to the DOM and running side effects.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.