Pourquoi vous avez besoin de la prop 'key' de React
Vous voyez cet avertissement dans votre console : « Each child in a list should have a unique 'key' prop. »
De nombreux développeurs l'ignorent. C'est une erreur. La prop 'key' n'est pas qu'un simple avertissement. C'est un outil pour la performance et la prévention des bugs.
À quoi sert la prop 'key' ?
React utilise la 'key' pour identifier les éléments d'une liste. Elle indique à React quel élément a été modifié, déplacé ou supprimé.
Sans 'key', React doit re-rendre toute la liste. Cela ralentit votre application et provoque des bugs de données.
L'exemple de la bibliothèque
Imaginez une bibliothèque avec 1 000 livres. Si vous ajoutez un nouveau livre au milieu, vous devez déplacer tous les autres livres pour faire de la place.
Dans React, la 'key' agit comme un identifiant unique. Elle donne une identité à chaque élément. Lors du processus de réconciliation, React compare la nouvelle liste à l'ancienne.
Le problème de l'absence de 'keys'
Si vous omettez la 'key', React pense que chaque élément est identique. Si vous ajoutez un élément au début, React pense que toute la liste a changé. Il recrée chaque élément dans le DOM. Cela gaspille de la mémoire et du CPU.
Le piège de l'index
Les nouveaux développeurs utilisent souvent l'index du tableau comme 'key'.
Exemple : key={index}
C'est dangereux pour les listes dynamiques. Si vous triez, filtrez ou supprimez des éléments, l'index change. Cela entraîne des états d'interface utilisateur incorrects et des bugs.
Bonnes pratiques pour les 'keys'
- Utilisez des identifiants stables provenant de votre base de données (comme
user.id). - Assurez-vous que les 'keys' sont uniques parmi les éléments frères (siblings).
- Évitez d'utiliser
Math.random()comme 'key'. Cela change à chaque rendu et provoque des scintillements de l'interface (UI flickering). - Si vos données n'ont pas d'identifiant, générez-en un en utilisant
uuidounanoidlors de la récupération des données.
Guide de sélection des 'keys'
• ID de base de données : Le meilleur. Très stable et rapide.
• Index de tableau : À utiliser uniquement pour les listes statiques qui ne changent jamais.
• Math.random() : À éviter. Cela force des remontages (re-mounts) inutiles.
Résumé
Une bonne 'key' rend votre application plus rapide. Elle peut économiser jusqu'à 40 % de re-rendus inutiles. Donnez toujours la priorité aux identifiants stables et uniques.