Intermediate LevelReact JS & React 19
What is the difference between Render Phase and Commit Phase in React rendering lifecycle?
❓ Interview Prompt: Explain Render Phase (pure, interruptible, calculates diffs) vs Commit Phase (synchronous DOM mutations, side effects execution).
React splits rendering into two distinct phases:
1
Render Phase (Pure & Interruptible):
•
React calls component functions and calculates Virtual DOM diffs.
•
Must be pure! React may pause, abort, or re-run render passes during Concurrent Rendering.
2
Commit Phase (Synchronous & Un-interruptible):
•
React applies calculated mutations to the physical DOM.
•
Executes lifecycle effects ('useLayoutEffect', 'useEffect').
Code Implementation Example
jsx
// Render Phase: Calculates Virtual DOM diffs (Pure, no DOM changes yet!)
function Counter() {
const [count, setCount] = useState(0);
// Commit Phase: React updates real DOM node, then runs useEffect!
useEffect(() => {
document.title = 'Count: ${count}';
}, [count]);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}💡Understanding Render Phase Virtual DOM calculations vs Commit Phase DOM updates.
🎯 Interview Key Takeaway
Keep the Render Phase pure without side effects; execute side effects and DOM manipulations in the Commit Phase via effects.
#Render Phase#Commit Phase#Lifecycle#Intermediate
Back to all React JS & React 19 Questions→