React 5 3 Comprendre les clés

Si vous ouvrez les outils de développement du navigateur (F12) et que vous regardez l'onglet Console, vous remarquez probablement un avertissement (warning) jaune signalant que chaque enfant dans une liste devrait avoir une prop key unique. Ce cours explique comment supprimer ce warning.

Pourquoi React demande une key ?

Quand React affiche une liste de composants générée par map(), il a besoin d'identifier de manière unique chaque élément pour optimiser les ré-rendus. Sans key, React doit comparer toute la liste à chaque changement, ce qui peut introduire des bugs subtils (par exemple, l'état d'un composant qui « migre » vers un autre quand l'ordre change).

Pour corriger l'avertissement, ouvrez le fichier Expenses.js (ou ExpensesList.js selon votre structure) et ajoutez la prop key sur le composant <ExpenseItem /> rendu dans le map() :

{props.items.map((expense) => (
  <ExpenseItem
    key={expense.id}
    title={expense.title}
    amount={expense.amount}
    date={expense.date}
  />
))}

On utilise expense.id comme valeur de la key — un identifiant unique propre à chaque dépense. Cet identifiant a été défini dans le composant App.js avec les dépenses factices (e1, e2, e3, e4) et est aussi généré pour chaque nouvelle dépense ajoutée via Math.random().toString().

Une fois ce changement appliqué, retournez sur votre page web et rechargez : le warning key dans la console a disparu. C'est aussi simple que ça, mais c'est une bonne pratique essentielle qui évitera des bugs plus difficiles à diagnostiquer dans des applications complexes.