Lesson 2.310mAdvanced5.5k students

Keys and list reconciliation

Keys tell React which item is which. Using an array index means insertions silently reassign state to the wrong row.

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