Zašto stavke popisa trebaju ključ, i zašto ne koristiti indeks?

Question

Accepted Answer

Kada prikazuješ popis, React treba način da zna **koja stavka je koja** između renderiranja kako bi mogao ispravno ponovno koristiti, preuređivati, umetati ili brisati DOM čvorove. **`key`** je taj identitet. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Zašto je indeks niza rizičan Korištenje indeksa kao ključa govori Reactu "stavka na poziciji 0 je ista stavka kao prije" — što se prekida čim se popis preuređi ili umetneš/izbrišeš s početka: ```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. ``` Prava simptom: popis inputa gdje pisanje u jednom redu "skače" na drugi nakon brisanja/sortiranja, jer je React ponovno koristio krivi `` (i njegovu unutarnju vrijednost/fokus). ## Pravila - Koristi **stabilan, jedinstven** id iz tvojih podataka (`user.id`, slug). - Indeks je prihvatljiv **samo** za statički popis koji se nikada ne preuređuje, ne umeće ili ne briše. - Ključevi moraju biti jedinstveni među **srodnicima** (ne globalno). Ključevi su nagovještaj algoritmu pomirenja; pravilno ih postavljanje čuva i performanse i stanje komponente.