Clés React, oui ! Vous en avez besoin, mais pourquoi exactement ?

Il y a encore une chose dont vous devez vous souvenir, et c'est la Clé React chaque élément de la liste rendue doit l'avoir. Ce concept est l'une des premières choses que tout développeur frontal apprend à connaître React au début de leur parcours. Nous allons maintenant nous pencher un peu plus sur les raisons de cette situation et sur les moments où il est possible de prendre des raccourcis.

Pourquoi avons-nous besoin de cet attribut clé ?

La réponse la plus simple serait "d'optimiser les re-renders", mais la réponse la plus complète doit au moins mentionner le concept de React Rapprochement. Il s'agit de déterminer comment mettre à jour l'interface utilisateur de la manière la plus efficace possible. Pour y parvenir rapidement, React doit décider quelles parties de l'arbre des éléments doivent être mises à jour et lesquelles ne doivent pas l'être. Le problème est qu'il peut y avoir beaucoup d'éléments dans le DOM et que comparer chacun d'entre eux pour décider lequel doit être mis à jour est assez coûteux. Pour optimiser ce processus, React met en œuvre l'algorithme diffing qui repose sur deux hypothèses :

1. Deux types d'éléments différents ne seront jamais identiques.
2. Les développeurs peuvent contribuer manuellement à l'optimisation de ce processus par le biais d'attributs clés, de sorte que les éléments, même si leur ordre a changé, peuvent être localisés et comparés plus rapidement.

Sur cette base, nous pouvons conclure que chaque Clé React doivent également être uniques (dans la liste des éléments, pas globalement) et stables (ils ne doivent pas changer). Mais que se passe-t-il lorsqu'ils ne le sont pas ?

Unicité, stabilité et indice de tableau

Comme nous l'avons déjà mentionné, Clés React doit être stable et unique. Le moyen le plus simple d'y parvenir est d'utiliser un identifiant unique (provenant par exemple d'une base de données) et de le transmettre à chaque élément lors du mappage d'un tableau, ce qui est facile. Mais qu'en est-il des situations où nous n'avons pas d'ID, de nom ou d'autres identifiants uniques à passer à chaque élément ? Eh bien, si nous ne passons rien comme clé, React prendra par défaut l'index du tableau courant (puisqu'il est unique dans cette liste) pour le gérer à notre place, mais il nous donnera aussi un joli message d'erreur dans la console :

Pourquoi en est-il ainsi ? La réponse est que l'index du tableau n'est pas stable. Si l'ordre des éléments change, chacune des clés changera et nous aurons un problème. Si l'ordre des éléments change, chacune des clés changera et nous aurons un problème. React Dans une situation où l'ordre d'une liste d'éléments a été modifié, il essaiera toujours de les comparer par les clés, ce qui signifie que chaque comparaison aboutira à la reconstruction d'un composant et que, par conséquent, la liste entière sera reconstruite à partir de zéro. En outre, nous pouvons rencontrer des problèmes inattendus, comme des mises à jour de l'état des composants pour des éléments tels que des entrées non contrôlées et d'autres problèmes magiques difficiles à déboguer.

Exceptions

Revenons à l'index du tableau. Si on l'utilise comme Clé React peut être si problématique, pourquoi React l'utilisera par défaut ? Existe-t-il un cas d'utilisation pour lequel il est acceptable de le faire ? La réponse est oui, le cas d'utilisation est celui des listes statiques. Si vous êtes sûr que la liste que vous rendez ne changera jamais d'ordre, vous pouvez utiliser l'index de tableau, mais rappelez-vous que si vous avez des identifiants uniques, il est préférable de les utiliser à la place. Vous pouvez également remarquer que le fait de passer des index en tant que clés rendra la fonction React disparaît, tout en déclenchant simultanément l'affichage d'une erreur ou d'un avertissement par certains linters externes. Cela est dû au fait que l'utilisation explicite d'index comme clés est considérée comme une mauvaise pratique et que certains linters peuvent la traiter comme une erreur, tandis que React considère qu'il s'agit d'une situation où "les développeurs savent ce qu'ils font" - ne le faites donc pas à moins que vous ne sachiez vraiment ce que vous faites. Quelques exemples de cas où il est possible d'utiliser cette exception : un menu déroulant avec une liste statique de boutons ou l'affichage d'une liste d'éléments avec l'adresse de votre entreprise.

Une alternative à la clé basée sur les ensembles de données

Supposons qu'aucune des options ci-dessus ne soit envisageable. Par exemple, nous devons afficher une liste d'éléments basée sur un tableau de chaînes de caractères qui peut être dupliqué, mais aussi réordonné. Dans ce cas, nous ne pouvons utiliser aucune des chaînes parce qu'elles ne sont pas uniques (ce qui peut également provoquer des bogues magiques), et l'index du tableau n'est pas suffisant parce que nous allons changer l'ordre des éléments. La dernière chose sur laquelle nous pouvons compter dans ce genre de situation est l'utilisation d'identifiants externes. Rappelez-vous qu'ils doivent être stables, nous ne pouvons donc pas nous contenter de Math.random(). Il existe des paquets NPM que nous pouvons utiliser dans de tels cas, par exemple le paquet "uuid" de l'ensemble des données. Des outils de ce type peuvent nous aider à maintenir nos clés de liste stables et uniques, même lorsque nous ne pouvons pas trouver les identifiants appropriés dans notre ensemble de données. Nous devrions envisager d'utiliser d'abord l'ID de la base de données et l'index du tableau (si possible), afin de minimiser le nombre de paquets utilisés par nos projet.

En résumé

• Chaque élément de la liste des React doivent avoir un attribut clé unique et stable,
• Clés React sont utilisés pour accélérer le processus de Processus de réconciliation et éviter de reconstruire inutilement des éléments sur les listes,
• La meilleure source de clés est l'ID unique de la saisie de données (par exemple, à partir de la base de données),
• Vous pouvez utiliser l'index du tableau comme clé, mais uniquement pour une liste statique dont l'ordre ne changera pas,
• S'il n'y a pas d'autre moyen d'obtenir des clés stables et uniques, envisagez d'utiliser des fournisseurs d'identifiants externes, par exemple le paquet "uuid".

En savoir plus :

Pourquoi vous devriez (probablement) utiliser Typescript

Comment ne pas tuer un projet avec de mauvaises pratiques de codage ?

Stratégies de récupération des données dans NextJS