React memo, useMemo et useCallback (avec refs, portals et useId)

React memo, useMemo, useCallback, forwardRef, portals et useId

React memo, useMemo ou useCallback, forwardRef, portals, useId | We.Inc

Quand utiliser React memo, useMemo et useCallback, avec des compteurs de rendus en direct. Plus forwardRef et ref en prop dans React 19, les modales avec createPortal, les labels avec useId et une liste virtuelle de 10,000 lignes.

Enveloppez un composant dans memo pour sauter les rendus quand ses props n'ont pas changé. Utilisez useCallback pour garder une prop fonction identique entre les rendus, et useMemo pour mettre en cache un objet ou un calcul lent. Ils ne servent qu'en combinaison avec memo ou face à un vrai coût. Mesurez d'abord avec le React Profiler ; les compteurs en direct ci-dessous montrent la différence.

Une ligne chacun

API
Met en cache

memo(Component)
Le résultat du rendu d'un composant

useMemo(fn, deps)
Une valeur

useCallback(fn, deps)
Une fonction

createPortal(node, el)
Rien ; effectue le rendu ailleurs dans le DOM

useId()
Rien ; crée un identifiant unique et stable

Les démos comptent de vrais rendus dans votre navigateur. Tapez dans chaque champ avec l'interrupteur désactivé puis activé, et observez les compteurs. La seconde moitié couvre les API de référence qui apparaissent à côté du travail de performance : refs, portals et identifiants.

Trouvez l'interaction lente avec le Profiler des React DevTools.
Consultez le tableau de décision pour le symptôme observé.
Appliquez un seul changement, par exemple memo sur l'enfant qui se re-rend.
Stabilisez les props qu'il reçoit avec useCallback ou useMemo.
Profilez à nouveau et ne gardez le changement que si les chiffres se sont améliorés.

memo compare les props de façon superficielle. Étaler un nouvel objet dans les props à chaque rendu l'annule.
Descendez l'état dans le composant qui l'utilise ; cela supprime souvent le re-rendu sans aucun memo.
Passez children en prop. Quand un parent se re-rend, les éléments enfants reçus d'en haut ne se re-rendent pas.
React Compiler peut ajouter cette mémoïsation pour vous au moment du build. Si votre projet l'utilise, écrivez du code simple et laissez-le gérer le reste.
Virtualisez les listes au-delà de quelques centaines de lignes complexes, et gardez une hauteur de ligne fixe quand c'est possible.

Questions fréquentes

Quelle est la différence entre useMemo et useCallback ?

useMemo appelle votre fonction et met en cache la valeur qu'elle renvoie. useCallback met en cache la fonction elle-même. useCallback(fn, deps) équivaut à useMemo(() => fn, deps).

Faut-il envelopper chaque composant dans memo ?

Non. Comparer les props prend aussi du temps, et la plupart des rendus sont peu coûteux. Utilisez memo là où le Profiler montre un composant qui se rend souvent avec les mêmes props et prend un temps notable.

forwardRef est-il obsolète ?

Dans React 19, les composants fonction acceptent ref comme une prop normale, donc le nouveau code n'a pas besoin de forwardRef. Il fonctionne toujours, et l'équipe React a annoncé qu'il sera déprécié dans une future version.

Pourquoi utiliser un portal pour une modale ?

Une modale placée dans une carte avec overflow hidden ou un transform peut être coupée ou passer sous d'autres contenus. La rendre dans document.body avec createPortal évite les deux tout en la gardant dans votre arbre React.

Puis-je utiliser useId pour les clés de liste ?

Non. useId sert aux attributs d'accessibilité comme htmlFor et aria-describedby. Les clés doivent venir de vos données, par exemple un identifiant de base de données.

Comment mesurer

Ouvrez les React DevTools, allez dans l'onglet Profiler, enregistrez pendant que vous faites l'action lente, puis arrêtez. Le flame chart montre quels composants se sont rendus et combien de temps chacun a pris. Activez "Highlight updates when components render" pour voir les re-rendus au fil de vos clics.
Testez avec un build de production. Le mode développement ajoute des vérifications qui ralentissent tout, et StrictMode rend volontairement les composants deux fois.

Erreurs courantes

Lister comme dépendance un objet recréé à chaque rendu, si bien que useMemo recalcule de toute façon à chaque fois.
Omettre une dépendance pour empêcher un recalcul, ce qui affiche des données périmées. La règle de lint react-hooks/exhaustive-deps le détecte.
Placer le nœud cible d'un portal dans un état qui n'est pas prêt au premier rendu, si bien que la modale clignote ou lève une erreur côté serveur.

Tableau de décision : memo, useMemo, useCallback ou autre chose

Quel outil pour quel problème

Symptôme
Solution
Pourquoi

Un enfant se re-rend avec son parent alors que ses props n'ont pas changé
memo(Child)
Saute le rendu quand chaque prop est égale (Object.is)

Un enfant memo se re-rend quand même parce que vous lui passez une nouvelle fonction à chaque fois
useCallback
Garde la même fonction entre les rendus

Un enfant memo se re-rend quand même parce que vous passez un nouvel objet ou tableau
useMemo
Garde le même objet jusqu'à ce que ses entrées changent

Un calcul lent s'exécute à chaque frappe
useMemo
Met le résultat en cache jusqu'à ce que ses entrées changent

Des milliers de lignes rendent le défilement ou la saisie lents
Une liste virtuelle (react-window)
Seules les lignes à l'écran sont dans le DOM

La saisie rame parce qu'une grande liste se met à jour avec elle
useDeferredValue ou startTransition
Laisse le champ se mettre à jour d'abord et la liste suivre ensuite

Rien n'est visiblement lent
Rien
La mémoïsation a aussi un coût ; mesurez d'abord

Nombre de rendus, avant et après

memo : sauter les rendus quand les props sont égales

Tapez dans le champ. Sans memo, la liste se re-rend à chaque touche alors que ses props n'ont pas changé. Avec memo, elle se rend une seule fois.

useCallback : garder une fonction identique

Passer une fonction fléchée en ligne casse memo, car une nouvelle fonction est créée à chaque rendu. useCallback renvoie la même jusqu'à ce que ses dépendances changent.

useMemo : mettre en cache un calcul lent

Filtrer 20,000 produits à chaque rendu est du travail perdu quand seule une valeur sans rapport a changé. useMemo ne relance le filtre que lorsque products ou query changent.

forwardRef, ref en prop, portals et useId

forwardRef (React 18 et antérieur)

Un parent ne peut pas passer ref à un composant fonction sauf si celui-ci la transmet. forwardRef fait passer la ref jusqu'à un vrai élément.

ref en prop (React 19)

Depuis React 19, les composants fonction reçoivent ref comme n'importe quelle autre prop, donc forwardRef n'est plus nécessaire dans le nouveau code.

createPortal pour les modales et les infobulles

Un portal rend ses enfants dans un autre nœud du DOM, généralement document.body, pour qu'une modale échappe aux parents avec overflow hidden ou un z-index faible. Les événements React remontent toujours à travers l'arbre React.

useId pour les paires label et input

useId fournit un identifiant unique identique entre le rendu serveur et le rendu navigateur, donc plusieurs copies du même composant de champ n'entrent jamais en conflit.

Listes longues

react-window : une liste de 10,000 lignes

List ne rend que les lignes visibles plus quelques-unes en plus. Chaque ligne reçoit index et style ; style positionne la ligne et doit être appliqué. La démo à côté utilise la même idée, écrite à la main.

Vous créez des formulaires ? useId se marie bien avec

React Hook Form

Liste rendue {n} fois ({count} éléments)

Envelopper la liste dans memo

Tapez ici

({n} rendus)

Utiliser useCallback

Petit

Moyen

Grand

Choisi : {x}

Mettre en cache avec useMemo

Filtrer les produits

Clic sans rapport ({n})

{matches} sur 20,000 correspondent. Le filtre a tourné {runs} fois ; la dernière exécution a pris {ms} ms.

Rechercher

Activer la recherche

Cette boîte a overflow hidden, et pourtant la modale couvre toute la fenêtre.

Ouvrir la modale

Démo de portal

J'ai été rendu dans document.body avec createPortal.

Fermer

E-mail

Nous répondons sous un jour.

E-mail (encore)

Même composant, identifiant différent.

10,000 clients

Client {n}

10,000 lignes, mais seulement {n} sont dans le DOM en ce moment.

Commencer gratuitement · Sans carte bancaire