Lorsque vous affichez une liste, React a besoin d'un moyen de savoir quel élément est quel élément entre les rendus afin de pouvoir réutiliser, réorganiser, insérer ou supprimer correctement les nœuds DOM. La key est cette identité.
{users.map(user => (
<Row key={user.id} user= />
))}
Utiliser l'index comme clé indique à React « l'élément à la position 0 est le même élément qu'avant » — ce qui se casse dès que la liste est réorganisée ou que vous insérez/supprimez par l'avant :
// items: [A, B, C] with keys 0,1,2
// you DELETE A → [B, C], keys become 0,1
// React thinks key 0 (was A) is now B, key 1 (was B) is now C...
// so it keeps the wrong DOM state with the wrong item.
Un vrai symptôme : une liste d'entrées où la saisie dans une ligne « saute » à une autre après la suppression/tri, parce que React a réutilisé le mauvais <input> (et sa valeur/focus interne).
user.id, un slug).Les clés sont un indice pour l'algorithme de réconciliation ; les obtenir correctement maintient les performances et l'état du composant corrects.