Render and Commit Phases
React's rendering process is divided into two distinct phases: the render phase and the commit phase. The render phase is where React computes the UI and is characterized by being pure, interruptible, and invisible to the user. In contrast, the commit phase is synchronous, atomic, and deterministic, applying all DOM mutations at once. This separation ensures UI consistency, even under concurrent updates, and helps developers avoid performance pitfalls by minimizing speculative work during rendering and focusing on efficient commits. Best practices emphasize keeping render functions pure and managing side effects appropriately to enhance application performance.
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 ...