commit phase VS render phase

ReactMiddle~3 min read

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

Short Answer

Interview ready

Premium

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