Maîtrisez les listes et les clés dans React
Le rendu de listes dans React est simple, mais le faire correctement est difficile.
De nombreux développeurs utilisent l'index du tableau comme clé. C'est une erreur. Cela entraîne des bugs et des problèmes de performance.
Voici comment vous devriez gérer les données dynamiques dans React.
Comment React utilise les listes
React utilise la méthode map() pour transformer des tableaux en éléments d'interface utilisateur (UI). Lorsque vous utilisez map(), React transforme chaque donnée en un composant.
Le rôle des clés React utilise un Virtual DOM. Lorsque les données changent, React compare les nouvelles données avec les anciennes. Ce processus est appelé la réconciliation.
Les clés agissent comme des identifiants uniques. Elles indiquent précisément à React quel élément a été modifié, déplacé ou supprimé.
Pourquoi l'utilisation de l'index comme clé est dangereuse L'utilisation de l'index (0, 1, 2...) comme clé cause trois problèmes principaux :
- Erreurs d'état des composants : Si vous triez une liste, les champs de saisie ou les cases à cocher pourraient afficher les données du mauvais élément.
- Baisse de performance : React ne peut pas savoir quel élément est lequel. Il doit souvent re-rendre toute la liste au lieu d'un seul élément.
- Bugs visuels : Votre interface utilisateur peut sembler correcte, mais la logique interne échouera lorsque les éléments se déplaceront.
La bonne façon d'utiliser les clés Pour garder votre application rapide et stable, suivez ces règles :
- Utilisez des identifiants uniques : Utilisez toujours des IDs provenant de votre base de données (comme un UUID ou une clé primaire).
- N'utilisez jamais
Math.random(): Générer des clés pendant le rendu force React à recréer chaque élément à chaque mise à jour. Cela détruit les performances. - Gardez les clés stables : Une clé doit rester identique pour une même donnée tout au long de son cycle de vie.
Comparaison en un coup d'œil
Caractéristique : Stabilité Utilisation de l'index : Instable Utilisation d'un ID unique : Très stable
Caractéristique : Performance Utilisation de l'index : Médiocre Utilisation d'un ID unique : Optimale
Caractéristique : Sécurité de l'état Utilisation de l'index : Non sécurisé Utilisation d'un ID unique : 100 % sécurisé
Résumé pour les développeurs
Utilisez la méthode map(). Passez un ID unique et stable à la prop key. Évitez d'utiliser l'index du tableau pour toute liste susceptible d'être modifiée, triée ou filtrée.