Key Prop
React 🟢 JuniorDéfinition
Attribut spécial qui aide React a identifier chaque élément dans une liste. Permet une réconciliation efficace sans reconstruire tout le DOM.
Analogie
Comme les numéros de dossards dans une course : React sait qui est qui même si l'ordre change.
Exemple de code
// Correct: identifiant unique
items.map(item => <li key={item.id}>{item.name}</li>)
// Anti-pattern: index comme key
items.map((item, i) => <li key={i}>{item.name}</li>)
Cas d'usage
Obligatoire dans toute liste dynamique pour éviter des bugs de rendu et améliorer les performances.
Anti-pattern
Utiliser l'index comme key dans une liste qui peut être triée, filtrée ou modifiée, causant des bugs d'état.