📝 Exercices — R11 Performance React

Créez un composant Parent avec deux boutons (BoutonAction) enveloppés dans React.memo. Utilisez useCallback pour les handlers afin que les boutons ne se re-rendent pas quand un état non lié change.

// Votre code ici — React.memo + useCallback import { useState, useCallback, memo } from 'react'; const BoutonAction = memo(function BoutonAction({ onAction, label }) { // Ce composant ne doit se re-rendre que si ses props changent return <button onClick={onAction}>{label}</button>; }); function Parent() { const [count, setCount] = useState(0); const [other, setOther] = useState(0); // useCallback pour stabiliser les handlers }

Créez FibCalculateur avec un slider pour N et un bouton "Re-render". Le calcul de Fibonacci doit utiliser useMemo pour n'être recalculé que quand N change — pas quand le bouton re-render est cliqué.

// Votre code ici — useMemo pour calcul Fibonacci import { useState, useMemo } from 'react'; function nthFibonacci(n) { if (n <= 1) return n; let a = 0, b = 1; for (let i = 2; i <= n; i++) [a, b] = [b, a + b]; return b; } function FibCalculateur() { const [n, setN] = useState(30); // useMemo(() => nthFibonacci(n), [n]) }

Utilisez React.lazy(() => import('./Page')) pour charger des composants à la demande. Enveloppez-les dans <Suspense fallback={...}>. Le composant lazy n'est chargé qu'au moment où il est affiché.

// Votre code ici — lazy() + Suspense import { lazy, Suspense, useState } from 'react'; // Chargement à la demande const Dashboard = lazy(() => import('./pages/Dashboard')); const Settings = lazy(() => import('./pages/Settings')); function App() { const [page, setPage] = useState('home'); // Suspense avec fallback pendant le chargement }

Créez un composant LazyImage qui n'affiche l'image que quand elle entre dans le viewport, en utilisant IntersectionObserver. Alternative : utiliser l'attribut natif loading="lazy".

// Votre code ici — IntersectionObserver ou loading="lazy" import { useState, useEffect, useRef } from 'react'; function LazyImage({ src, alt }) { const [inView, setInView] = useState(false); const ref = useRef(null); useEffect(() => { const observer = new IntersectionObserver(/* ... */); // Observer l'élément, nettoyage dans le return }, []); return <div ref={ref}>{inView ? <img src={src} alt={alt} /> : <div style={{ height: '200px' }} />}</div>; }

Enveloppez un composant dans <Profiler id="..." onRender={callback}>. La fonction onRender reçoit id, phase, actualDuration, baseDuration. Logguez ces valeurs dans la console.

// Votre code ici — React.Profiler import { Profiler, useState, memo } from 'react'; function onRenderCallback(id, phase, actualDuration, baseDuration) { console.log(`${id} (${phase}): ${actualDuration.toFixed(2)}ms`); } function App() { return ( <Profiler id="MonComposant" onRender={onRenderCallback}> {/* composant à mesurer */} </Profiler> ); }

Démontrez le problème des styles inline (style={{ color: 'red' }} crée un nouvel objet à chaque render). Montrez la solution : définir le style hors du composant comme constante, ou utiliser useMemo si le style est dynamique.

// Votre code ici — styles stables vs instables import { useState, useMemo, memo } from 'react'; // ❌ Instable : // <Enfant style={{ color: 'red' }} /> — nouvel objet à chaque render // ✅ Stable : const STABLE_STYLE = { color: 'red', padding: '1rem' }; // <Enfant style={STABLE_STYLE} /> // ✅ Dynamique stable : // const style = useMemo(() => ({ color }), [color]); const EnfantMemo = memo(function Enfant({ style, label }) { /* ... */ });

Créez une liste d'items avec des clés stables (id unique, pas l'index). Enveloppez chaque item dans React.memo. Testez l'ajout/suppression — seuls les items modifiés doivent se re-rendre.

// Votre code ici — clés stables + React.memo sur les items import { useState, memo } from 'react'; // ✅ Utiliser item.id comme clé (stable) // ❌ Ne pas utiliser l'index (unstable après ajout/suppression) const ItemMemo = memo(function Item({ item, onDelete }) { console.log('Item rendu :', item.nom); return <li>{item.nom} <button onClick={() => onDelete(item.id)}>×</button></li>; }); function ListeStable() { const [items, setItems] = useState([/* items avec id unique */]); // key={item.id} — jamais key={index} }

Implémentez une liste virtualisée : pour 10 000 items, n'affichez que ceux visibles dans le viewport. Utilisez scrollTop, itemHeight et slice pour calculer quels items afficher.

// Votre code ici — virtualisation avec scrollTop import { useState, useMemo, useCallback } from 'react'; const ITEM_HEIGHT = 48; const VISIBLE_COUNT = 10; function VirtualList({ items }) { const [scrollTop, setScrollTop] = useState(0); // startIndex = Math.floor(scrollTop / ITEM_HEIGHT) // Afficher slice(startIndex, startIndex + VISIBLE_COUNT) // div container avec height = items.length * ITEM_HEIGHT // padding-top = startIndex * ITEM_HEIGHT }

Créez une liste filtrée optimisée combinant : useReducer (état), useMemo (filtrage), useCallback (handlers), et React.memo (items). Toutes ces techniques ensemble.

// Votre code ici — toutes les optimisations ensemble import { useState, useMemo, useCallback, memo, useReducer } from 'react'; const ItemRow = memo(function ItemRow({ item, onDelete }) { /* ... */ }); function reducer(state, action) { /* ... */ } function OptimizedList() { const [state, dispatch] = useReducer(reducer, { items: [], query: '', filter: 'tous' }); // useMemo pour filtered // useCallback pour handleDelete et handleQuery }

Créez une application qui combine toutes les techniques : React.memo, useMemo, useCallback, lazy/Suspense pour les composants lourds, et useReducer pour l'état complexe.

// Votre code ici — toutes les optimisations import { lazy, Suspense, useState, useMemo, useCallback, memo, useReducer, useRef, useEffect } from 'react'; // Code splitting const HeavyChart = lazy(() => import('./HeavyChart')); // Reducer, memo sur les rows, useMemo pour filtrage, // useCallback pour handlers, Suspense pour le chart