Render Phase vs Commit Phase
React's update cycle has two phases: the render phase (calling component functions to build the virtual DOM, pure and can be paused) and the commit phase (applying DOM mutations, synchronous and uninterruptible).
Render phase is the architect drafting blueprints (can revise, restart, discard). Commit phase is the construction crew building from the final blueprint (uninterruptible, one shot).
During the render phase, React calls your component functions and diffs the old and new element trees. No DOM mutations happen here. This phase must be pure — no side effects, no DOM access, no subscriptions. In concurrent mode, React may pause, discard, or restart the render phase. The commit phase applies the computed DOM mutations (insertions, updates, deletions), attaches refs, and fires synchronous effects (useLayoutEffect). After the browser paints, passive effects (useEffect) run.
The commit phase has sub-phases: (1) Before mutation — snapshot lifecycle methods, getSnapshotBeforeUpdate. (2) Mutation — actual DOM operations are performed. (3) Layout — useLayoutEffect callbacks fire, ref.current is set. (4) After paint — useEffect callbacks fire in a microtask. In concurrent rendering, the render phase can be called multiple times for the same update, but the commit phase runs exactly once. This is why side effects in render functions are dangerous — they'd execute multiple times. The commit phase processes effects depth-first: child layout effects before parent layout effects, ensuring children are fully mounted when parents read refs.
Render phase is where React calls component functions and diffs the virtual DOM — it's pure and interruptible in concurrent mode. Commit phase applies DOM mutations synchronously, then fires layout effects, then browser paints, then passive effects. Side effects only go in the commit phase (effects and event handlers) because the render phase may run multiple times.
Performing side effects (API calls, subscriptions, DOM manipulation) during the render phase. In concurrent mode, your render function may be called multiple times for one update, causing duplicate side effects.