React Curriculum

Render Phase vs Commit Phase Mechanics

Hard100% Free~25 mins#react#render-phase#commit-phase#concurrent-mode#strictmode#purity

Interview Answer (30-Second Summary)

The Render Phase is asynchronous and pure: React invokes component functions and diffs Fiber trees without touching the DOM, and work can be paused or discarded. The Commit Phase is synchronous and fast: React mutates the real DOM, executes layout effects, and schedules passive effects.

Key Learning Objectives

✓

Differentiate between the Render Phase (computation) and Commit Phase (mutation).

✓

Explain why the Render Phase must be 100% free of side-effects in Concurrent React.

✓

Trace the three sub-phases of Commit: Mutation, Layout, and Passive effects.

✓

Understand why StrictMode executes the Render Phase twice in development.

The Interview Problem & Context

Explain the fundamental differences between the Render Phase and Commit Phase in React. What operations are permitted in each phase, and why is the Render Phase interruptible while the Commit Phase is not?

1// PHASE 1: RENDER PHASE (Interruptible, pure computations, NO DOM mutations!)
2// - Invokes Component render functions
3// - Evaluates useState / useReducer initializers & updaters
4// - Runs diffing algorithm to create workInProgress Fiber tree
5// - In Concurrent React: Can be paused, restarted, or thrown away!
6
7// PHASE 2: COMMIT PHASE (Synchronous, uninterruptible DOM operations)
8// 1. Before Mutation Phase: Reads snapshot (getSnapshotBeforeUpdate)
9// 2. Mutation Phase: Mutates real DOM (inserts, updates, deletes DOM nodes)
10// 3. Layout Phase: Runs useLayoutEffect callbacks synchronously before paint
11// --- Browser Repaint & Composite Screen ---
12// 4. Passive Effects Phase: Runs useEffect callbacks asynchronously after paint

Deep Architectural Explanation

The Two Phases of React Execution

Understanding React requires decoupling rendering from DOM updating:

State Change
│
▼
[Render Phase] ──> (Pure computations, diffing, can be paused/discarded)
│
▼
[Commit Phase] ──> (Synchronous DOM mutations, useLayoutEffect, paint, useEffect)

1. The Render Phase

Goal: Figure out what needs to change in the DOM.
Characteristics: Fast, asynchronous, and interruptible.
What happens: React calls component functions, resolves hook updates, and marks Fibers with effect flags (Placement, Update, Deletion).
Rule: Must be pure! React may start rendering, pause when a user types, discard the draft render, and restart. Any side-effects (like incrementing a counter or making a network request) would run multiple times!

2. The Commit Phase

Goal: Apply calculated changes to the browser DOM.
Characteristics: Synchronous and uninterruptible.
Why it must be synchronous: If the browser painted while React was halfway through inserting a list of 10 items, the user would see broken, flickering partial UI.
Sub-phases:
1. Mutation: React updates real DOM nodes.
2. Layout: Runs useLayoutEffect synchronously.
3. Paint: The browser renders pixels to the screen.
4. Passive: Runs useEffect callbacks asynchronously.

Common Interview Traps & Pitfalls

Assuming "rendering" means "painting pixels to the browser screen" (rendering is just calculating the virtual element diff).

Triggering network requests or modifying localStorage during the Render Phase.

Believing useEffect runs during the Commit Mutation sub-phase (it runs asynchronously after browser paint).

Senior Interviewer Follow-Up Probes

Why does React 18 Concurrent Mode discard an entire Render Phase if an urgent update arrives?

How does getSnapshotBeforeUpdate capture scroll position right before the DOM is mutated?

What happens if a state update is scheduled inside useLayoutEffect vs useEffect?

Frequently Asked Interview Questions

What is the main difference between the Render and Commit phases?

The Render phase calculates the changes in memory and is interruptible and pure. The Commit phase applies those changes to the real DOM synchronously and triggers effects.

Why can the Render phase be discarded in Concurrent React?

If a higher-priority update (like a user keystroke) occurs while React is rendering a low-priority background transition, React throws away the draft render to respond to the user immediately.

Can you trigger state updates during the Commit phase?

Yes, updating state inside useLayoutEffect or useEffect schedules a new render pass, but doing so in useLayoutEffect forces a synchronous re-render before paint.

Which phase does React StrictMode run twice?

StrictMode intentionally runs the Render phase twice in development to verify that component functions are pure and idempotent.

When do DOM nodes get created vs attached to the document?

Host DOM nodes are instantiated during the Render phase, but they are only appended to the actual document tree during the Commit Mutation phase.

Previous: Fiber Node Architecture & Work Loop Next: Virtual DOM Mechanics: Myths & Overhead