Mi történik, ha az array indexét adod meg kulcsként?

A Reactben a tömb indexének kulcsként (key) való használata teljesítményproblémákhoz és a komponensek helyes frissítésének problémáihoz vezethet. Amikor a elemek sorrendje megváltozik, vagy elemeket szúrunk be/törlünk, az indexek változnak, és a React hibásan társíthatja a komponenseket, ami felesleges újrarajzolásokat vagy állapotvesztést okozhat.

Például, ha van egy listád:

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

És új elemet szúrsz be a tömb elejére, minden kulcs elmozdul, és a React szinte minden komponenst újra fog létrehozni, pedig csak egyet kellett volna frissíteni.

Jobb, ha az adatokból származó egyedi és stabil azonosítókat, például id-t használsz:

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