Que se passe-t-il si on passe l'index du tableau comme clé?

L'utilisation de l'indice du tableau comme clé (key) dans React peut entraîner des problèmes de performance et de précision lors de la mise à jour des composants. Lorsqu'on modifie l'ordre des éléments ou qu'on insère/supprime des éléments, les indices changent, et React peut associer incorrectement les composants, ce qui entraîne des rerenders inutiles ou une perte d'état.

Par exemple, si vous avez une liste :

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

Et que vous insérez un nouvel élément au début du tableau, toutes les clés seront décalées, et React recréera presque tous les composants, alors qu'il aurait suffi de mettre à jour un seul.

Il est préférable d'utiliser des identifiants uniques et stables issus des données, par exemple id :

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