Når du rendrer en liste, trenger React en måte å vite hvilket element som er hvilket mellom renderinger slik at det kan gjenbruke, omordne, sette inn eller slette DOM-noder riktig. key er den identiteten.
{users.map(user => (
<Row key={user.id} user={user} />
))}
Å bruke indeksen som nøkkel forteller React "elementet på posisjon 0 er det samme elementet som før" — noe som brytes umiddelbart når listen omordnes, eller du setter inn/fjerner fra fronten:
// 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.
Et reelt symptom: en liste med input-felt der det å skrive inn i en rad "hopper" til en annen etter sletting/sortering, fordi React gjenbrukte feil <input> (og dens interne verdi/fokus).
user.id, en slug).Nøkler er et hint til rekonsilierings-algoritmen; å få dem riktig holder både ytelse og komponent-tilstand korrekt.