Render and Commit Phases
Explore the distinct React render and commit phases to understand how UI rendering is separated from DOM updates. Learn why React’s render phase is interruptible and pure while the commit phase is synchronous and atomic. Gain insights into performance optimization by managing costly render work and understanding effect execution order. This lesson helps you debug complex UI behaviors and design efficient React components respecting phase boundaries.
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
...