Mis juhtub, kui edastate massiivi indeksi võtmena?

React'is massiivi indeksi kui võti (key) kasutamine võib põhjustada jõudlusprobleeme ja komponentide täpsuse probleeme uuendamisel. Kui elementide järjekord muutub või elemente lisatakse/eemaldatakse, muutuvad indeksid ning React võib valesti sobitada komponente, mis põhjustab tarbetuid uuesti joonistusi või seisundi kadumist.

Näiteks, kui teil on nimekiri:

{items.map((item, index) => (
  <ListItem key={index} item={item} />
))}

Ja lisate uue elemendi nimekirja algusesse, kõik võtmed nihkuvad ning React loob peaaegu kõik komponendid uuesti, kuigi oleks võinud uuendada ainult ühte.

Parema tulemuse saavutamiseks on soovitatav kasutada unikaalseid ja stabiilseid andmetest pärit identifikaatoreid, näiteks id:

{items.map(item => (
  <ListItem key={item.id} item={item} />
))}