Għaliex il-elementi tal-lista għandhom bżonn key, u għaliex le l-index?

Question

Accepted Answer

Meta rrindi lista, React għandu bżonn mod biex jaf **liema element hu liema** bejn ir-renders sabiex ikun jista' jirriusa, jireordna, iddaħħal, jew iħassar nodi DOM kif xieraq. Il-**`key`** hu dik l-identità. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Għaliex l-array index huwa riskjuż Itħarreġ l-index bħala key jgħid lir-React "l-element fil-pożizzjoni 0 hu l-istess element bħal qabel" — li jinkisser issielet meta l-lista tireordna, jew iddaħħal/tħassar mid-front: ```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. ``` Sintomi reali: lista ta' inputs fejn ittipjar f'ringiela waħda "ittellgħa" għal oħra wara ħasira/sorting, għaliex React irriusa l-`` ħamsa (u l-valur/focus intern tiegħu). ## Regoli - Uża **stabbli, uniku** id mill-data tiegħek (`user.id`, slug). - L-index huwa aċċettabbli **biss** għal lista statika li qatt ma tireordna, tiddaħħal, jew tħassar. - Il-keys għandhom ikunu uniċi fost **siblings** (mhux globalment). L-keys huma hint għall-algoritmu tar-riconciliation; jekk ikunu koretti iżommu kemm il-performance kif ukoll l-istat tal-component korrett.