Ce se întâmplă dacă transmiteți indexul array-ului ca și cheie?

Utilizarea indexului array-ului ca cheie (key) în React poate duce la probleme de performanță și acuratețe în actualizarea componentelor. Când se schimbă ordinea elementelor sau se inserează/șterg elemente, indicii se schimbă, iar React poate asocia greșit componentele, ceea ce va cauza re-randări inutile sau pierderea stării.

De exemplu, dacă aveți o listă:

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

Și inserați un element nou la începutul array-ului, toate cheile se vor deplasa, iar React va recrea aproape toate componentele, deși s-ar fi putut actualiza doar una.

Este mai bine să folosiți identificatori unici și stabili din date, de exemplu id:

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