How does React Reconciliation work? (Variant 2)
AI Interviewer Insight
React Reconciliation is the process by which React updates the DOM. When a component's state changes, React creates a new Virtual DOM tree and compares it with the previous one using a diffing algorithm. It identifies the minimum number of changes needed (operations) and applies them to the real DOM in a batch.
Strong Answer
"I'd explain it as a two-step process: Render and Commit. First, React compares the new Virtual DOM with the old one (diffing). It uses heuristics like key props to optimize this. Then, in the commit phase, it applies only the necessary changes to the real DOM, which makes React fast."
Poor Answer
"React just re-renders the whole page whenever a state changes."
Common Pitfalls
- •Thinking the real DOM is updated immediately on state change
- •Forgetting the role of the 'key' prop in list diffing
STAR Method Example
Situation
Our complex dashboard was freezing during rapid state updates.
Task
Optimize the rendering performance.
Action
I profiled the app and realized reconciliation was thrashing because of missing keys in a large list. I added stable unique keys and implemented React.memo.
Result
The freezing stopped and FPS increased from 15 to 60 during data streams.
Likely Follow-Up Questions
How does the 'key' prop optimize reconciliation?
What is Fiber in React?
Practice this question
Speak your answer out loud and get instant AI feedback on your delivery, pacing, and content.
Start Voice Mock Interview