Render Phase vs Commit Phase

To understand how React updates the UI, it’s essential to understand that the process is split into two distinct phases: the Render Phase and the Commit Phase.

Before any components are displayed on screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes.

Step 1: Triggering a render

There are two reasons a component will render:

It’s the component’s initial render (when the app starts).
The component’s (or one of its ancestors’) state has been updated.

Step 2: The Render Phase

After a render is triggered, React calls your components to figure out what should be on screen. “Rendering” is simply React calling your component functions.

On initial render: React will call the root component.
On subsequent renders: React will call the component whose state update triggered the render.

This process is recursive. If the updated component returns some child components in its JSX, React renders those children, and their children, all the way down the tree.

Important Rule: The Render Phase must be pure.
React does not mutate the DOM during the render phase. It only calculates the differences (diffing) between the old Virtual DOM and the new Virtual DOM. Because rendering must be pure, it should not have any side effects (like fetching data or mutating the DOM).

Step 3: The Commit Phase

After React has completely finished the Render Phase and calculated all the necessary changes, it enters the Commit Phase. This is when React actually touches the DOM.

For the initial render: React will use DOM APIs like appendChild() to put all the DOM nodes it created onto the screen.
For re-renders: React will apply the minimal necessary operations (calculated during the render phase) to make the DOM match the latest rendering output.

React only touches the DOM nodes that actually changed. If a component renders the exact same JSX as last time, React will skip the Commit Phase for that specific component.

Step 4: Browser Paint

After the Commit Phase is complete and React has updated the DOM, the browser will repaint the screen to reflect the new DOM tree. This is sometimes referred to as “browser rendering”, but to avoid confusion with React’s rendering, we call it painting.

Interview Questions

Q: What is the difference between the Render Phase and the Commit Phase?
A:

Render Phase: React calls your components to figure out what the UI should look like. This phase must be pure and have no side effects, because React may pause, abort, or restart this phase at any time.
Commit Phase: React actually mutates the real DOM to match the result of the Render phase, and then fires your useLayoutEffect and useEffect hooks. This phase is synchronous and cannot be interrupted.