Wat gebeurt er als je de array-index als key doorgeeft?

Het gebruik van de array-index als sleutel (key) in React kan leiden tot prestatieproblemen en onjuiste component-updates. Wanneer de volgorde van de elementen wordt gewijzigd of elementen worden toegevoegd/verwijderd, veranderen de indices, en React kan de componenten verkeerd koppelen, wat leidt tot onnodige her-renderingen of verlies van staat.

Bijvoorbeeld, als je een lijst hebt:

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

En je voegt een nieuw element toe aan het begin van de array, verschuiven alle sleutels, en React zal bijna alle componenten opnieuw maken, terwijl je slechts één zou kunnen bijwerken.

Het is beter om unieke en stabiele identificaties uit de gegevens te gebruiken, bijvoorbeeld id:

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