Wanneer u een lijst rendert, heeft React een manier nodig om te weten welk item welk is tussen renders, zodat het DOM-knooppunten correct kan hergebruiken, herordenen, invoegen of verwijderen. De key is die identiteit.
{users.map(user => (
<Row key={user.id} user={user} />
))}
Het gebruik van de index als key vertelt React "het item op positie 0 is hetzelfde item als daarvoor" — wat breekt zodra de lijst wordt hergeordend, of u iets van voren invoegt/verwijdert:
// items: [A, B, C] with keys 0,1,2
// you DELETE A → [B, C], keys become 0,1
// React thinks key 0 (was A) is now B, key 1 (was B) is now C...
// so it keeps the wrong DOM state with the wrong item.
Een echt symptoom: een lijst met inputs waarbij het typen in één rij "springt" naar een ander na verwijderen/sorteren, omdat React de verkeerde <input> heeft hergebruikt (en de interne waarde/focus ervan).
user.id, een slug).Keys zijn een hint voor het reconciliation-algoritme; het goed doen houdt zowel de prestaties als de componentstatus correct.