The Rendering Phase and DOM Commit
Trace React's render cycle from JSX evaluation through reconciliation to the browser's paint step.
React Work Cycle Overview
React's work cycle has two main phases: the render phase and the commit phase. During the render phase, React calls your component functions and builds a virtual representation of the UI (the fiber tree). During the commit phase, React applies the changes from the fiber tree to the real DOM.
The Render Phase Can Be Interrupted
In React 18 Concurrent Mode, the render phase can be paused, interrupted, or restarted. React may call your component function multiple times before committing anything. This is why component functions must be pure — they cannot have side effects, because the function might run more than once per visible update.
All lessons in this course
- The Rendering Phase and DOM Commit
- When useLayoutEffect Runs vs useEffect
- Measuring DOM Elements with useLayoutEffect
- Avoiding Layout Thrash and Visual Flicker