Comprendre le cycle de rendu React

Avant d'optimiser, il faut comprendre comment React met à jour l'UI. Chaque mise à jour d'état déclenche une nouvelle comparaison de l'arbre de composants (reconciliation). L'objectif : minimiser l'impact de ce processus.

Mémorisation avec useMemo et useCallback

Ces hooks sont cruciaux pour éviter des calculs ou créations de fonctions coûteuses à chaque rendu : useMemo pour mémoriser des valeurs, useCallback pour des fonctions. À utiliser avec parcimonie sur les opérations lourdes.

Éviter les rendus inutiles avec React.memo

Enrobez vos composants dans React.memo pour une mémoisation superficielle. Particulièrement efficace sur les listes complexes ou les composants feuilles. Attention : à combiner avec des props stables !

Chargement intelligent

Code Splitting avec React.lazy

Divisez votre bundle en morceaux chargés à la demande :

const Gallery = React.lazy(() => import('./Gallery'));

Combine avec <Suspense> pour gérer les états de chargement.

Chargement différé des images

Utilisez le loading="lazy" natif ou des librairies comme react-lazyload pour ne charger les images qu'au viewport. Réduit jusqu'à 50% le poids initial des pages riches en médias.

Outils d'analyse

React DevTools Profiler

Intégré aux DevTools, cet outil enregistre chaque rendu avec son coût et sa cause. Indispensable pour identifier les composants à optimiser en priorité.

Lighthouse et Web Vitals

Mesurez les indicateurs clés (LCP, FID, CLS) directement dans Chrome DevTools. Les scores sous 90/100 sur mobile signalent des problèmes d'expérience utilisateur concrets.