De ce elementele listei au nevoie de o cheie, și de ce nu folosești indexul?

Question

IT Interview Practice · Accepted Answer

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. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## De ce indexul de matrice este riscant 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ță: ```jsx // 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 ``-ul greșit (și valoarea/focusul său intern). ## De ce este important - Folosește un id **stabil, unic** din datele tale (`user.id`, un slug). - Indexul este acceptabil **doar** pentru o listă statică care nu se reordoneaza, inserează sau șterge niciodată. - Cheile trebuie să fie unice printre **frații** (nu global). 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ă.

De ce indexul de matrice este riscant

De ce este important

Întrebări conexe