Kai React nuskaitote sąrašą, jam reikia žinoti kuris elementas yra kuris tarp nuskaitymų, kad galėtų teisingai panaudoti, perrikioti, įterpti arba ištrinti DOM mazgus. key yra ta tapatybė.
{users.map(user => (
<Row key={user.id} user={user} /> // stable, unique id
))}
Naudojant indeksą kaip key, React'ui sakote "elementas pozicijoje 0 yra tas pats elementas kaip anksčiau" — kas sulaužo iš karto, kai sąrašas perkirstamas arba įterpiate/ištrinate iš pradžios:
// 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.
Tikra pasekme: įvesties sąrašas, kur rašymas viename eilutėje "šokinėja" į kitą po ištrynimo/rūšiavimo, nes React panaudojo neteisingą <input> (ir jo vidinę reikšmę/fokusą).
user.id, slugą).Raktai yra užuomina reconciliation algoritmui; juos nustačius teisingai, pasiekiamas ir našumas, ir komponento statas yra teisingi.