Commit Phase vs Render Phase

ReactMiddle~3 min read

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

Short Answer

Interview ready

Premium

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