Key Prop

React 🟢 Junior

Definition

Attribut special qui aide React a identifier chaque element dans une liste. Permet une reconciliation efficace sans reconstruire tout le DOM.

Analogie

Comme les numeros de dossards dans une course : React sait qui est qui meme 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 eviter des bugs de rendu et ameliorer les performances.

Anti-pattern

Utiliser l'index comme key dans une liste qui peut etre triee, filtree ou modifiee, causant des bugs d'etat.
#core#interview#performance