// Composant enfant mémoïsé
const ProductItem = React.memo(function ProductItem({ product, onSelect }) {
    console.log('ProductItem rendu:', product.name);
    return (
        <li onClick={() => onSelect(product.id)}>
            {product.name}
        </li>
    );
});

// Composant parent
function ProductList({ products }) {
    const [selected, setSelected] = useState(null);

    // SANS useCallback : nouvelle fonction à chaque rendu
    // → ProductItem est re-rendu même si product n'a pas changé
    const handleSelect = (id) => {
        setSelected(id);
    };

    // AVEC useCallback : même fonction tant que les dépendances ne changent pas
    const handleSelectMemo = useCallback((id) => {
        setSelected(id);
    }, []);  // [] car setSelected est stable

    return (
        <ul>
            {products.map(p => (
                <ProductItem
                    key={p.id}
                    product={p}
                    onSelect={handleSelectMemo}
                />
            ))}
        </ul>
    );
}