07

Listes & Keys

Rendu dynamique de collections d'éléments

Le concept : Les applications web génèrent rarement des éléments d'interface à la main un par un. Dans React, on utilise la puissance de JavaScript (et notamment Array.map) pour transformer un tableau de données (comme une liste de produits ou de messages) en un tableau de Composants React.

La seule règle d'or ? Fournir une Key (clé) unique à chaque élément pour que React puisse les suivre et les mettre à jour efficacement.

[{id:1}, {id:2}, {id:3}] .map() <Card/> 1 <Card/> 2 <Card/> 3
💡 L'importance des Keys

Quand React met à jour une liste, il a besoin d'identifier quel élément a changé, a été ajouté ou supprimé. La prop key sert d'identifiant unique.

Si vous utilisez l'index du tableau (0, 1, 2) comme key et que vous supprimez le premier élément, React va se mélanger les pinceaux et réutiliser le DOM du premier élément pour le second, causant des bugs d'affichage ou de performance.

Map & Key
const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" }
];

function UserList() {
    return (
        <ul>
            {users.map(user => (
                // KEY est obligatoire et doit être unique (ID)
                <li key={ user.id }>
                    { user.name }
                </li>
            ))}
        </ul>
    );
}
Anti-Pattern : Index as Key
// ❌ MAUVAIS : Si la liste change d'ordre, tout casse !
{items.map((item, index) => (
    <li key={index}>{item}</li>
))}

// ✅ BON : Utilisez un ID unique et stable
{items.map(item => (
    <li key={item.id}>{item.text}</li>
))}

🧠 État Dérivé (Derived State)

Ne créez pas de state inutile pour filtrer une liste !

// ❌ Inutile
const [filtered, setFiltered] = useState([]);
useEffect(() => { setFiltered(...) }, [search]);

// ✅ Juste une variable
const visibleTodos = todos.filter(t => t.active);

📋 Analogie : La Feuille d'Appel

Imaginez une classe d'élèves. Si vous les appelez par leur position ("Élève au 1er rang"), et qu'ils changent de place, tout est faux !
Si vous les appelez par leur ID unique (Matricule), ils peuvent bouger sans problème. C'est ça la key.

Performance : Virtual List
// Si vous avez 10 000 items, le DOM va ramer.
// Solution : N'afficher que ce qui est visible à l'écran.
// Librairie recommandée : react-window

<FixedSizeList
  height={500}
  width={500}
  itemSize={35}
  itemCount={10000}
>
  {Row}
</FixedSizeList>
Démo Listes
Résultat
⚠️ Erreur Classique Ne pas utiliser l'index du tableau comme key si la liste peut changer (tri, ajout, suppression). Utilisez un ID unique.
← Events Suivant : Forms →