Lesson 2.3
Keys and list reconciliation
Keys tell React which item is which. Using an array index means insertions silently reassign state to the wrong row.
9mAdvanced5,503 students
Sign in to watch this lesson
Browsing is free. Create an account to play videos and track your progress.
Overview
Keys tell React which item is which. Using an array index means insertions silently reassign state to the wrong row.
What 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