Când redezi o listă, React are nevoie de o modalitate de a ști care element este care între randări, pentru a putea reutiliza, reordona, insera sau șterge noduri DOM corect. key este acea identitate.
{users.map(user => (
<Row key={user.id} user={user} /> // stable, unique id
))}
O bibliotecă de întrebări de interviu IT cu răspunsuri detaliate — de la Junior la Senior.
DoneazăFolosirea indexului ca cheie spune React "elementul la poziția 0 este același element ca înainte" — ceea ce se rupe imediat când lista se reordoneaza, sau tu inserezi/ștergi din față:
// 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.
Un simptom real: o listă de inputs în care tastarea într-un rând "sare" la altul după ștergere/sortare, deoarece React a reutilizat <input>-ul greșit (și valoarea/focusul său intern).
user.id, un slug).Cheile sunt o sugestie pentru algoritmul de reconciliație; a le obține corect păstrează atât performanța cât și starea componentei corectă.