How does React use keys in reconciliation? When do keys cause bugs?
Tests reconciliation identity semantics. Answer: keys give scoped identity for O(n) diffing; stable keys preserve state, but indices during reordering make React reuse DOM nodes wrongly, polluting state. Red flag: saying keys are 'just for performance'.
Tests React reconciliation identity semantics. A strong answer explains that keys are scoped identity hints enabling O(n) diffing: stable keys let React preserve component state and reuse DOM nodes, while unstable keys such as array indices during reordering cause React to match and reuse the wrong nodes, polluting form state or forcing remounts. A concrete example is a sortable list with text inputs keyed by index, where deleting the first item leaves the second item inheriting the first input's value.
Read the original → react.dev
- #react
- #reconciliation
- #keys
- #performance
- #state
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.