Kun renderöit luettelon, React tarvitsee tavan tietää, mikä kohde on mikä renderöintien välillä, jotta se voi oikein käyttää uudelleen, järjestää, lisätä tai poistaa DOM-solmuja. key on tämä identiteetti.
{users.map(user => (
<Row key={user.id} user={user} />
))}
Indeksin käyttäminen avaimena kertoo React:ille "kohde asemassa 0 on sama kohde kuin ennen" — mikä hajoaa heti, kun luettelo järjestetään uudelleen tai lisäät/poistat alusta:
// 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.
Oikea oire: luettelo syöttökentistä, joissa yhden rivin kirjoittaminen "hyppää" toiselle riville poiston/lajittelun jälkeen, koska React käytti uudelleen väärää <input>-elementtiä (ja sen sisäistä arvoa/fokusta).
user.id, slug).Avaimet ovat vihje tasapainotusalgoritmille; niiden oikea saaminen pitää sekä suorituskyvyn että komponentin tilan oikeina.