Render and Commit Phases
Understand how React’s two-phase pipeline, render and commit, controls update scheduling, effect timing, and DOM consistency in React 19’s concurrent runtime.
Fiber allows React to pause, resume, and restart rendering work. However, not all rendering work can be safely paused. If React mutated the DOM halfway through constructing a new tree, the user would briefly see an inconsistent UI. To prevent this, React enforces a strict separation between computing the next UI and committing it to the DOM. This separation between render and commit explains much of React’s behavior under concurrency, including why logs repeat, why effects run when they do, and why layout thrashing occurs when the phases are misused. A solid understanding of these phases is essential when debugging subtle performance issues in large React applications.
Two-phase pipeline
React’s update system is not one function call; it is a multi-stage pipeline. Fiber makes the first stage fully interruptible and the second strictly atomic.
Render phase: The render phase is where React determines the UI’s appearance. This is the phase where:
Component functions execute.
The work-in-progress Fiber tree is produced or updated.
Diffing and reconciliation occur.
An effect list is prepared.
What makes this phase unique is not what it does, but how it behaves. The render phase in React is:
Pure: No DOM reads, no DOM writes.
Interruptible: React can pause rendering at any point in the tree.
Restartable: Previous progress can be discarded if needed.
Invisible to the user: Nothing is committed to the DOM yet.
Because the render phase may run repeatedly, expensive or unstable work incurs multiplied costs. This is why architectural patterns emphasize memoization, stable identities, and predictable component shapes to ensure optimal performance.
Commit phase: Once React completes an uninterrupted render pass and commits to the new UI, it transitions into the commit phase. Unlike render, this phase is:
Synchronous: It cannot pause
Atomic: All DOM mutations happen together
Deterministic: Effects and DOM updates occur in a precise order
The commit phase has four internal steps:
Before mutation: React prepares for changes ...