Correction d'un composant enfant recréé inutilement

السيناريو

Contexte : Une application affiche une liste de cartes produits avec un composant enfant pour chaque carte. Le Problème : À chaque modification du parent, tous les composants enfants se re-rendent, même si leurs props n'ont pas changé. Contraintes : Vous devez optimiser le rendu sans changer l'architecture globale. Utilisation autorisée de React.memo. Code actuel : function Card({ product }) { return <div>{product.name}</div>; } function ProductList({ products }) { const [count, setCount] = React.useState(0); return ( <div> <button onClick={() => setCount(count + 1)}>Update</button> {products.map(p => ( <Card key={p.id} product={p} /> ))} </div> ); } Livrable attendu : Optimiser le composant pour éviter les re-rendus inutiles des cartes.

المهارات المستهدفة