React Rn-Rendering Wrokflow

Source: Dev.to

Overview

In this post I share a personal analysis of the React re‑render workflow. The process consists of three core steps (plus the browser paint). Below is a simple explanation of each step.

Step 1 – Trigger

React starts a render when something changes, such as:

• State change
• Props change
• Context change
• Parent re‑render

Note: React does not update the DOM immediately; it only schedules an update.

Step 2 – Render Phase

The Fiber engine handles reconciliation during this phase:

• Calls components and creates new React elements (the Virtual DOM)
• Compares the new output with the previous one (diffing)
• Determines which parts need to be updated, deleted, or created

Note: This phase is pure computation—no DOM mutations occur here.

Step 3 – Commit Phase

After the render phase, the commit phase runs and cannot be stopped. Once React has the final changes, it updates the real DOM:

• DOM mutations happen
• Refs are updated
• Cleanup of previous effects runs
• useLayoutEffect runs synchronously, before the browser paint

Note: This phase is fast but blocking.

Step 4 – Browser Paint

When the DOM is updated, the browser paints the UI on screen. After the paint:

• useEffect runs asynchronously, non‑blocking

That’s why useEffect does not block the UI, while useLayoutEffect can.

Example

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

When the button is clicked:

1. Trigger: setCount is called.
2. Render Phase: React creates new elements and diffs them against the previous ones.
3. Commit Phase: The button’s text is updated in the real DOM.
4. Browser Paint: The UI shows the new count.
5. useEffect (if present) runs after the paint.

React may skip a DOM update if the output is unchanged (optimization).

Important Points

• A re‑render does not always mean a DOM update.
• A parent re‑render can trigger a child re‑render.
• React batches multiple state updates.
• Keys are crucial for list rendering.
• In Strict Mode, React may render components twice in development only.
• The render phase can run multiple times, but the commit phase runs once per update.