Short answer
React describes UI as a tree of elements. When state changes, it renders a new tree and compares it with the previous one — reconciliation — to compute the minimal set of DOM updates. It assumes elements of different types produce different trees and uses keys to match list items, which keeps diffing fast and predictable.
Heuristics React relies on
- Different element types (div vs span, or ComponentA vs ComponentB) replace the whole subtree.
- Same type means React updates props and recurses into children.
- Keys identify list items across renders so they can be moved instead of recreated.
Why keys matter
Using an array index as a key breaks when items are inserted or reordered: state and focus stick to positions instead of items. Use a stable id from your data.
How to answer it in an interview
- Clarify that the virtual DOM is an implementation detail; the real win is declarative updates.
- Mention that rendering is not the same as committing to the DOM.