React Reconciliation & Why Keys Matter
React Reconciliation & Why Keys Matter
MediumFrontend0% accepted
A todo list re-orders incorrectly and inputs keep the wrong values after deleting an item. Explain React's reconciliation (diffing) algorithm and why `key` is critical. Cover: how React diffs the virtual DOM, what happens with index-as-key on a reordered list, why stable unique keys fix state bugs, and the cost of getting keys wrong.
Approach
React diffs old vs new virtual DOM per level, matching children by key. Index keys break on reorder/delete because React reuses the wrong DOM/state. Use stable IDs.
More Frontend problems
Browse all coding problems →Scenarios & Expected Answers
No example scenarios for this problem.
Sign in to continue
Create a free account to view answers and mark progress.
- Free forever — no credit card
- Theory Q&A with detailed answers
- Points, streaks & leaderboards