0Pricing
Frontend Academy · Leçon

useMemo et useCallback pour les performances

Mémorisez les calculs coûteux avec useMemo et les références stables de fonctions avec useCallback afin d’éviter les nouveaux rendus inutiles des composants enfants.

useMemo et useCallback pour les performances est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Comportement par défaut de React

Par défaut, React effectue un nouveau rendu d'un composant chaque fois que son état ou son parent effectue un nouveau rendu. Les composants enfants effectuent également un nouveau rendu même si leurs propriétés n'ont pas changé. Pour la plupart des composants, cela convient parfaitement : React est rapide.

useMemo — Mémoriser les valeurs coûteuses

useMemo(fn, deps) met en cache le résultat d'un calcul. La fonction ne s'exécute que lorsque les dépendances changent. Utilisez-le pour les calculs coûteux qu'il serait inutile de répéter à chaque rendu.

const expensiveResult = useMemo(() => {
  return items.filter(item => item.category === category).sort((a, b) => a.price - b.price);
}, [items, category]);
// Only recalculates when items or category changes

useCallback — Mémoriser les fonctions

useCallback(fn, deps) renvoie une fonction mémorisée qui conserve la même référence tant que les dépendances ne changent pas. Utilisez-le lorsque vous transmettez des fonctions de rappel à des composants profondément imbriqués ou mémorisés.

const handleDelete = useCallback((id: string) => {
  setItems(prev => prev.filter(item => item.id !== id));
}, []); // stable reference — empty deps because only setItems is used

<ItemList items={items} onDelete={handleDelete} />

React.memo — Éviter les nouveaux rendus

React.memo(Component) encapsule un composant afin qu'il n'effectue un nouveau rendu que lorsque ses propriétés changent (comparaison superficielle). Combinez-le avec useCallback pour obtenir des propriétés de rappel stables.

const MemoItem = React.memo(function Item({ text, onDelete }: ItemProps) {
  console.log('Item rendered:', text); // only logs when props change
  return <li>{text} <button onClick={onDelete}>×</button></li>;
});

// onDelete must be stable (from useCallback) for memo to help

Quand NOT optimiser

L'optimisation prématurée est un piège. useMemo et useCallback ont un coût : la fermeture et la comparaison des dépendances. Pour les opérations peu coûteuses (filtrer 10 éléments), le surcoût dépasse le bénéfice. Optimisez lorsque vos mesures révèlent un véritable problème de performances.

Profiler avant d'optimiser

Utilisez le profileur de React DevTools pour mesurer les temps de rendu réels avant d'ajouter une mémorisation. Le profileur indique quels composants prennent le plus de temps et combien de fois ils effectuent un rendu. Corrigez les problèmes en vous fondant sur des faits, et non sur des suppositions.

useMemo pour des références stables

useMemo est également utile pour conserver une référence stable — non pas pour accélérer le calcul lui-même, mais pour empêcher une mémorisation ou un effet en aval de se réexécuter inutilement.

// Without useMemo, this creates a new array every render:
const config = useMemo(() => ({ endpoint: '/api', timeout: 5000 }), []);

// Without memoization, useEffect would re-run on every render:
useEffect(() => { initSDK(config); }, [config]);

Dépendances de useCallback

useCallback suit les mêmes règles de dépendances que useEffect. Incluez chaque variable de la portée externe utilisée par la fonction de rappel. Les fonctions de définition de l'état (provenant de useState) sont toujours stables et n'ont pas besoin de figurer dans les dépendances.

Relation entre useMemo et useCallback

useCallback(fn, deps) est équivalent à useMemo(() => fn, deps). Il s'agit du même mécanisme : useCallback est simplement une syntaxe abrégée pour mémoriser spécifiquement des fonctions.

Mémorisation des éléments de liste

Un modèle courant consiste à mémoriser les composants représentant les éléments d'une liste lorsque celle-ci est volumineuse et effectue fréquemment de nouveaux rendus. Transmettez des fonctions de rappel stables depuis useCallback pour ne pas neutraliser la mémorisation.

const MemoRow = React.memo(Row);
const handleEdit = useCallback((id) => edit(id), []);
const handleDel  = useCallback((id) => remove(id), []);

{rows.map(row => (
  <MemoRow key={row.id} row={row} onEdit={handleEdit} onDelete={handleDel} />
))}

Mémorisation de la valeur du contexte

Mémorisez la valeur transmise à un fournisseur de contexte pour éviter que tous les consommateurs effectuent un nouveau rendu chaque fois que le parent du fournisseur effectue un nouveau rendu.

const value = useMemo(() => ({ user, login, logout }), [user]);

Vérification rapide

Quel est le rôle de useCallback ?

Récapitulatif : useMemo et useCallback

useMemo met en cache les valeurs calculées coûteuses. useCallback met en cache les références de fonctions. React.memo évite les nouveaux rendus lorsque les propriétés ne changent pas selon une comparaison superficielle. Combinez les trois pour améliorer les performances au niveau des composants. Profilez d'abord : une mémorisation prématurée ajoute de la complexité sans apporter de bénéfice. Les références stables empêchent les effets et les mémorisations en aval de se réexécuter.

Questions Fréquemment Posées

La leçon « useMemo et useCallback pour les performances » est-elle gratuite ?

Oui — le texte complet de « useMemo et useCallback pour les performances » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « useMemo et useCallback pour les performances » ?

Mémorisez les calculs coûteux avec useMemo et les références stables de fonctions avec useCallback afin d’éviter les nouveaux rendus inutiles des composants enfants. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « useMemo et useCallback pour les performances » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. useContext pour l’état global
  2. useReducer pour les états complexes
  3. useMemo et useCallback pour les performances
  4. Hooks personnalisés : extraire une logique réutilisable
← Retour à Frontend Academy