Why You Need the React Key Prop

Vous voyez cette erreur dans votre console : "Each child in a list should have a unique 'key' prop."

De nombreux développeurs l'ignorent. C'est une erreur. Cet avertissement vous informe de problèmes de performance et de bugs potentiels.

What is a key prop? Elle aide React à identifier des éléments spécifiques dans une liste. Elle indique à React quel élément a été modifié, déplacé ou supprimé. Sans clé, React re-rend toute la liste à chaque changement. Cela ralentit votre application.

Imaginez une bibliothèque de 1000 livres. Si vous ajoutez un nouveau livre au milieu, vous devez déplacer tous les autres livres pour faire de la place. Une clé agit comme un identifiant unique pour chaque livre. Elle permet à React de trouver l'emplacement exact sans avoir à tout déplacer.

The Reconciliation Process React utilise un algorithme de diffing pour comparer le nouveau Virtual DOM avec l'ancien.

  • L'état (state) change.
  • React construit un nouvel arbre.
  • React compare les arbres en utilisant les clés.
  • React ne met à jour que les éléments modifiés.

The common mistake: Using array index as a key. N'utilisez jamais key={index} si votre liste est dynamique. Si vous ajoutez ou supprimez des éléments, l'index de chaque élément change. React sera confus et re-rendra des éléments qui n'ont pas réellement changé. Cela gaspille de la mémoire et provoque des bugs d'interface utilisateur (UI).

How to fix it:

  • Utilisez un ID stable provenant de votre base de données (comme user.id).
  • Utilisez une chaîne unique comme uuid si vos données n'ont pas d'ID.
  • Évitez Math.random() pour les clés. Cela crée un nouvel ID à chaque rendu, ce qui force les composants à se remonter (re-mount) et provoque des scintillements de l'interface (UI flickering).

Best practices:

  • Les clés doivent être stables.
  • Les clés doivent être uniques parmi les éléments frères (siblings).
  • Utilisez les ID de la base de données pour obtenir les meilleures performances.

Key Comparison Table: • Database ID: Recommandé. Stable et rapide. • Array Index: Non recommandé. Provoque des bugs lors du tri ou du filtrage. • Math.random(): À éviter. Provoque des re-mounts inutiles.

Summary for your workflow: Si vous voyez cette erreur, vos composants manquent d'un identifiant permanent. Vérifiez la réponse de votre API pour trouver des champs uniques comme l'email ou l'ID. Corrigez cela pour économiser 30 à 40 % de re-rendus inutiles.

Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-key-prop-kyun-zaroori-hai-warning-solve-in-hindi-49dk