React Rn-Rendering Wrokflow

In this blog I am going to share my personal analysis of React re-render workflow. there are mainly 3 core steps (plus browser paint), let me tell you in very simple words what all these steps do:

Step 1. Trigger – basically it is when React triggers a render. There can be many ways to trigger, for example:

1. state change
2. props change
3. context change
4. parent re-render

Note: React does not immediately update DOM here, it just schedules an update.

Step 2. Render Phase – here Fiber engine comes into the picture. It handles reconciliation of new changes.
Basically it:

1. calls components and creates new React elements (Virtual DOM concept)
2. compares it with previous output using reconciliation (diffing)
3. decides what needs to update, delete, or create

Note: This phase is pure computation (no DOM updates)
It can be paused, restarted, or interrupted (Concurrent React)
React builds a Fiber tree to track and manage updates
React may skip re-rendering of components if props/state did not change (bailout optimization)

Step 3. Commit Phase – after render phase, commit phase starts. This phase cannot be stopped. Once React has final changes, it directly updates the real DOM.

In this phase:

1. DOM mutations happen
2. refs get updated
3. cleanup of previous effects runs
4. useLayoutEffect runs (synchronously, before paint)

Note: this phase is fast and blocking.

Step 4. Browser Paint – once DOM is updated, browser paints the UI on screen.

After paint:

1. useEffect runs (async, non-blocking)

Note: That’s why useEffect does not block UI, but useLayoutEffect can.

Here is an example with explanation:

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

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

when button clicked:

1. Trigger: setCount called
2. Render Phase: React creates new elements and compares with previous ones
3. Commit Phase: button text updated in real DOM
4. Browser Paint: UI shows new count
5. useEffect (if any) runs after paint
6. React may skip DOM update if output is same (optimization)

Some important points:

• Re-render does not always mean DOM update
• Parent re-render can trigger child re-render
• React batches multiple state updates
• Keys are important for list rendering
• In Strict Mode, React may render twice (dev only)
• Render phase can run multiple times, but commit runs once per update