React Render and Commit Phases Explained

React render and commit are the two phases behind every update in a React app. Rendering calls your components to work out what the screen should show, and committing applies that result to the DOM.

A state change, a new prop, or the first load all follow the same path. Understanding the split explains why a slow component slows rendering, not the browser paint.

The diagram shows the order from trigger to paint:

Each box is one phase with one job. The trigger starts the work, rendering computes the new description, committing updates the page, and the browser paints the pixels.

Trigger: what starts a render

A render starts in one of two ways. The first load calls the root component once, which is the initial render. After that, every state update queues another render.

Frameworks such as Next.js hide the createRoot call that starts the first render, but the initial render still happens once on mount. Calling a set function twice often still results in one visible update, because React batches the work.

You do not call a component to re-render it. Calling the set function from a state hook is the trigger, and React decides when the work happens.

Render: React calls your components

Rendering means React calls your component functions and asks for the JSX they return. It walks the whole tree below the updated component until there is nothing left to call. React keeps rendering until every nested component has returned its JSX.

Rendering must be pure. The same props and state should produce the same JSX, and the function should not change anything outside itself. In development, Strict Mode calls components twice to surface impure functions, which the guide on React StrictMode explains.

Commit: React updates the DOM

After rendering, React compares the new description with the previous one and changes only the DOM nodes that differ. Initial renders create all the nodes at once, while re-renders apply the smallest set of edits.

App.jsx

function Clock({ time }) {
  return (
    <>
      <h1>{time}</h1>
      <input placeholder="Type here" />
    </>
  );
}

When time changes every second, React updates only the text inside the heading. The input keeps whatever you typed, because React sees it in the same place and leaves that node alone.

The comparing step inside commit is called reconciliation. The guide on the React Virtual DOM and reconciliation covers the diffing in detail.