How Does React's Rendering Cycle Work?
The Interview Question
Walk me through React's rendering cycle. What happens when state changes?
Expert Answer
When state changes in React, three phases execute in sequence. First is the Trigger phase — a state update (via setState or a dispatcher) schedules a re-render. React batches multiple state updates that happen in the same event handler into a single render pass. Second is the Render phase — React calls your component function to get the new JSX. This is where the virtual DOM comes in: React builds a new tree of React elements and compares it to the previous tree using its reconciliation algorithm. This diffing process walks the tree from the root, comparing nodes by type and key. If a node's type changed, React tears down the old subtree and builds new. If the type is the same, it updates the props. Third is the Commit phase — React takes the list of changes (the 'diff') and applies them to the actual DOM in a single batch. Only the specific DOM nodes that changed get touched. After committing, React runs useEffect callbacks and ref assignments.
Key Points to Hit in Your Answer
- Three phases: Trigger → Render → Commit
- State updates in the same event handler are batched (React 18+ batches everything by default)
- The Render phase is pure — no side effects, can be paused/aborted (Concurrent Mode)
- Reconciliation uses element type + key to decide: update, create, or destroy
- Only the Commit phase touches the actual DOM
- useEffect runs asynchronously after paint; useLayoutEffect runs synchronously before paint
Code Example
// React batches these into ONE render
function handleClick() {
setCount(c => c + 1); // queued
setFlag(f => !f); // queued
setName('updated'); // queued
// React renders ONCE with all three updates
}
// Keys control reconciliation
{items.map(item => (
// React uses key to track identity across re-renders
<ListItem key={item.id} data={item} />
))}What Interviewers Are Really Looking For
Senior-level question. They want to hear you use precise language: 'render' means calling the function, not updating the DOM. They want to hear about batching, the role of keys in reconciliation, and ideally something about Concurrent Mode where the render phase can be interrupted. Mention that rendering is cheap — committing is expensive.
Practice This Question with AI Grading
Reading about interview questions is a start — but practicing with real-time AI feedback is how you actually get better. Goliath Prep grades your answers instantly and tells you exactly what you're missing.
Start Practicing Free →