React documentation (opens in a new tab)
The official reference for the tools used in this lesson.
Link
Keys and list reconciliation
Keys tell React which item is which. Using an array index means insertions silently reassign state to the wrong row.
Lesson 2.39m 51sAdvanced5.5k students
Lesson length
9:51What this lesson covers
- Use stable identity for keys, never the array index
- Understand how reconciliation matches elements between renders
- Diagnose lost input state in a reordered list
This lesson sits in Rendering Optimization, part of React Performance Engineering. It assumes what came before it and leads directly into the next lesson in the module.
In this lesson you will
- Use stable identity for keys, never the array index
- Understand how reconciliation matches elements between renders
- Diagnose lost input state in a reordered list
Resources
Personal notes are coming soon.