What are "commit phase" and "render phase"?

ReactMiddle~2 min read

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:

Before mutation phase - getSnapshotBeforeUpdate() is called (in classes).
Mutation phase - React updates the DOM (adds/removes/changes nodes).
Layout phase - React calls:

useLayoutEffect (cleanup of the previous one first, then the new ones)
componentDidMount / componentDidUpdate

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:

React calls Example() -> render phase console.log('render')
React applies the changes to the DOM -> commit phase
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.

Short Answer

Interview ready

Premium

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