Amikor egy listát renderelsz, a React-nek szüksége van egy módra, hogy tudja melyik elem melyik a renderelések között, hogy helyesen tudja újrafelhasználni, átrendezni, beszúrni vagy törölni a DOM csomópontokat. A key az az identitás.
{users.map(user => (
<Row key={user.id} user={user} /> // stable, unique id
))}
Miért kockázatos a tömb indexe
Az index kulcsként való használata azt mondja a React-nek, hogy "a 0. pozícióban lévő elem ugyanaz az elem, mint előbb" — amely azonnal törött lesz, ha a lista átrendeződik, vagy elölről beszúrsz/törlöd:
// 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.
Valódi tünet: input-ok listája, ahol az egyik sorban való gépelés "ugráskeresés" másik sorra a törlés/rendezés után, mert a React újra felhasználta a rossz <input>-ot (és annak belső értékét/fókuszát).
Szabályok
- Használj stabil, egyedi id-t az adataidból (
user.id, slug). - Az index csak statikus listára fogadható el, amely soha nem rendeződik át, nem szúr be vagy nem törölhet.
- A kulcsoknak egyedinek kell lenniük a testvérek között (nem globálisan).
A kulcsok egy tipp a rekonciliáció algoritmusnak; helyesen beállítva megőrzik a teljesítményt és az összetevő állapotát.