L'importance des `key` props : Identification et performance

Comprenez pourquoi les props `key` sont essentielles lors du rendu de listes en React. Découvrez leur rôle dans l'identification, la performance et la stabilité des composants.

Identifier chaque élément : le rôle fondamental des clés

Lorsque nous utilisons la méthode `map()` pour générer une liste d'éléments en React, nous créons dynamiquement une collection de composants ou de balises JSX. Imaginez maintenant que cette liste change : des éléments sont ajoutés, supprimés, ou simplement réordonnés. Comment React peut-il savoir quel élément correspond à quel élément de la version précédente de la liste ? Sans indice, il pourrait être obligé de détruire et recréer une grande partie de la liste, même pour un petit changement.

C'est ici qu'intervient la prop `key`. Les clés (`key`) sont des attributs spéciaux que vous devez fournir lorsque vous créez des listes d'éléments en React. Elles agissent comme une carte d'identité pour chaque élément *au sein de sa liste soeur*. React utilise ces clés lors de son processus de réconciliation (le mécanisme qui met à jour l'interface utilisateur) pour identifier de manière unique chaque élément et comprendre comment la liste a évolué entre deux rendus.

Fournir une clé stable et unique pour chaque élément permet à React de déterminer précisément quels éléments ont été ajoutés, supprimés ou déplacés. Cette identification précise est la base d'une mise à jour efficace et fiable de l'interface utilisateur.

Impact sur la réconciliation et les performances

Le processus de réconciliation de React vise à minimiser les manipulations directes du DOM, car celles-ci sont coûteuses en termes de performance. Lorsque React compare la nouvelle liste d'éléments (issue du rendu actuel) avec l'ancienne (issue du rendu précédent), il utilise les clés pour faire correspondre les éléments entre les deux versions.

Si un élément avec une certaine clé existe dans les deux listes, React sait qu'il s'agit potentiellement du même élément sous-jacent. Il peut alors comparer ses attributs et ses enfants pour appliquer uniquement les changements nécessaires, voire le déplacer s'il a changé de position, au lieu de le détruire et de le recréer entièrement. Si une clé présente dans l'ancienne liste n'est plus dans la nouvelle, React sait que l'élément doit être supprimé. Inversement, une nouvelle clé signale l'ajout d'un élément.

Sans clés (ou avec des clés non stables comme les index de tableau, ce que nous verrons plus tard), React perd cette capacité d'identification fine. Il pourrait devoir recourir à des comparaisons moins efficaces, potentiellement reconstruire des parties de la liste inutilement, ce qui dégrade les performances, surtout pour les listes longues ou fréquemment mises à jour.

Stabilité de l'état et du dom : éviter les bugs subtils

Au-delà des performances, les clés jouent un rôle crucial dans la préservation de l'état local des composants au sein d'une liste. Imaginez une liste de tâches où chaque tâche est un composant avec une case à cocher (gérant son propre état `isChecked`). Si vous réordonnez la liste sans fournir de clés stables, React pourrait réutiliser les instances de composants existantes en fonction de leur position, et non de leur identité réelle. Conséquence : l'état `isChecked` pourrait se retrouver associé à la mauvaise tâche après le réordonnancement !

De même, si vous avez des éléments DOM avec un état interne (comme un champ `` focalisé ou contenant du texte saisi par l'utilisateur), les clés garantissent que cet état est correctement préservé et associé au bon élément logique même si sa position dans le DOM change. L'utilisation de clés stables et uniques prévient donc des bugs subtils et difficiles à déboguer liés à la perte ou au mélange de l'état lors des mises à jour de listes.

L'absence de clé déclenche d'ailleurs un avertissement dans la console de développement de React. Cet avertissement n'est pas juste une suggestion ; il signale un problème potentiel qui peut affecter à la fois les performances et la correction de votre application.

Où et comment placer les clés ?

La règle est simple : la prop `key` doit être ajoutée à l'élément le plus haut retourné directement par la fonction callback de votre `map()`. Il ne faut pas la mettre sur l'élément conteneur (comme `

Reprenons nos exemples précédents et ajoutons les clés correctement. La clé doit être une chaîne de caractères ou un nombre, et elle doit être unique *parmi les frères et soeurs* dans cette liste spécifique. Souvent, les données que vous manipulez possèdent déjà un identifiant unique (ID de base de données, etc.) qui est parfait pour servir de clé.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // La clé est ajoutée directement sur le 
    // Ici, le nombre lui-même peut servir de clé s'il est unique dans la liste
    
 
      {number}
    
  );
  return (
    {listItems}
  );
}

const numbers = [1, 2, 3, 4, 5];
//

function TodoItem(props) {
  // Note: La clé n'est PAS nécessaire ici car elle est gérée par le parent dans le map.
  // La clé est utilisée par React, pas par votre composant.
  return {props.text};
}

function TodoList(props) {
  const todos = props.todos; 
  return (
    
      {todos.map((todo) => 
        // La clé est ajoutée sur le composant TodoItem retourné par le map.
        // On utilise l'id unique de la tâche.
        
      )}
    
  );
}

const myTodos = [
  { id: 'a1', text: 'Sortir le chien' },
  { id: 'b2', text: 'Faire les courses' },
  { id: 'c3', text: 'Fournir des clés uniques !' }
];
//

En résumé, les clés sont indispensables pour aider React à gérer efficacement et correctement les listes dynamiques. Elles garantissent l'identification unique des éléments, optimisent les mises à jour du DOM et préservent la stabilité de l'état des composants.

◄ Précédent Suivant ►

く