Pourquoi les éléments de liste ont-ils besoin d'une clé et pourquoi ne pas utiliser l'index ?

Question

IT Interview Practice · Accepted Answer

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é. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Pourquoi c'est important 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 : ```jsx // 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 `` (et sa valeur/focus interne). ## Règles - Utilisez un **id stable et unique** de vos données (`user.id`, un slug). - L'index est acceptable **uniquement** pour une liste statique qui ne se réorganise jamais, ne s'insère ou ne se supprime jamais. - Les clés doivent être uniques parmi les **frères et sœurs** (pas globalement). Les clés sont un indice pour l'algorithme de réconciliation ; les obtenir correctement maintient les performances et l'état du composant corrects.

Pourquoi c'est important

Règles

Questions connexes