useMemo |
Utilise un mémo |
|---|---|
| React | |
Syntaxe
| const cachedValue = useMemo(calculateValue, dependencies) |
Description
useMemo est un crochet React vous permettant de mettre en cache le résultat d'un calcul entre les rendus.
Référence
| useMemo(calculateValue, dependencies) |
Appelez useMemo au niveau supérieur de votre composant pour mettre en cache un calcul entre les rendus :
- import { useMemo } from 'react';
-
- function TodoList({ todos, tab }) {
- const visibleTodos = useMemo(
- () => filterTodos(todos, tab),
- [todos, tab]
- );
- // ...
- }
Paramètres
| Nom | Description |
|---|---|
| calculateValue | La fonction calculant la valeur à mettre en cache. Elle doit être pure, ne prendre aucun paramètre et renvoyer une valeur de n'importe quel type. React appellera votre fonction lors du rendu initial. Lors des rendus suivants, React renverra la même valeur si les dépendances n'ont pas changé depuis le dernier rendu. Sinon, il appellera calculateValue, renverra son résultat et le stockera pour une réutilisation ultérieure. |
| dependencies | La liste de toutes les valeurs réactives référencées dans le code calculateValue. Les valeurs réactives incluent les propriétés, l'état et toutes les variables et fonctions déclarées directement dans le corps de votre composant. Si votre linter est configuré pour React, il vérifiera que chaque valeur réactive est correctement spécifiée comme dépendance. La liste des dépendances doit comporter un nombre constant d'éléments et être écrite en ligne comme [dep1, dep2, dep3]. React comparera chaque dépendance à sa valeur précédente grâce à la comparaison Object.is. |
Renvoie
Lors du rendu initial, useMemo renvoie le résultat de l'appel à calculateValue sans paramètre.
Lors des rendus suivants, il renvoie soit une valeur déjà entreposée lors du dernier rendu (si les dépendances n'ont pas changé), soit appelle à nouveau calculateValue et renvoie le résultat renvoyé par calculateValue.
Mises en garde
- useMemo est un crochet ; vous ne pouvez donc l'appeler qu'au niveau supérieur de votre composante ou de vos propres crochets. Vous ne pouvez pas l'appeler à l'intérieur de boucles ou de conditions. Si nécessaire, extrayez une nouvelle composante et déplacez-y l'état.
- En mode strict, React appellera votre fonction de calcul deux fois afin de vous aider à détecter les impuretés accidentelles. Ce comportement est réservé au développement et n'affecte pas la production. Si votre fonction de calcul est pure (comme elle devrait l'être), cela ne devrait pas affecter votre logique. Le résultat de l'un des appels sera ignoré.
- React ne supprimera pas la valeur mise en cache, sauf raison spécifique. Par exemple, en développement, React supprime le cache lorsque vous modifiez le fichier de votre composante. En développement comme en production, React supprimera le cache si votre composante est suspendu pendant le montage initial. À l'avenir, React pourrait ajouter d'autres fonctionnalités tirant parti de la suppression du cache. Par exemple, si React intègre la prise en charge des listes virtualisées, il serait judicieux de supprimer le cache des éléments défilant hors de la fenêtre d'affichage de la table virtualisée. Cela devrait convenir si vous utilisez useMemo uniquement pour optimiser les performances. Sinon, une variable d'état ou une référence pourrait être plus appropriée.
Remarque
La mise en cache des valeurs de retour comme celle-ci est également connue sous le nom de mémorisation, c'est pourquoi ce crochet est appelé useMemo.
Utilisation
Éviter les recalculs coûteux
Pour mettre en cache un calcul entre les rendus, encapsulez-le dans un appel useMemo au niveau supérieur de votre composante :
- import { useMemo } from 'react';
-
- function TodoList({ todos, tab, theme }) {
- const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
- // ...
- }
Vous devez transmettre deux éléments à useMemo :
- Une fonction de calcul qui ne prend aucun argument, comme () =>, et qui renvoie le résultat souhaité.
- Une liste de dépendances incluant toutes les valeurs de votre composant utilisées dans votre calcul.
- Lors du rendu initial, la valeur obtenue par useMemo sera le résultat de l'appel de votre calcul.
À chaque rendu suivant, React comparera les dépendances avec celles transmises lors du dernier rendu. Si aucune dépendance n'a changé (par rapport à Object.is), useMemo renverra la valeur calculée précédemment. Sinon, React relancera le calcul et renverra la nouvelle valeur.
En d'autres termes, useMemo met en cache le résultat du calcul entre les rendus jusqu'à ce que ses dépendances changent.
Examinons un exemple pour comprendre l'utilité de cette méthode.
Par défaut, React réexécute l'intégralité du corps de votre composant à chaque nouveau rendu. Par exemple, si cette TodoList met à jour son état ou reçoit de nouvelles propriétés de son parent, la fonction filterTodos sera réexécutée :
- function TodoList({ todos, tab, theme }) {
- const visibleTodos = filterTodos(todos, tab);
- // ...
- }
Généralement, ce n'est pas un problème, car la plupart des calculs sont très rapides. Cependant, si vous filtrez ou transformez un grand tableau, ou si vous effectuez un calcul coûteux, il est préférable de ne pas le refaire si les données n'ont pas changé. Si les todos et les tabulations sont identiques à la dernière génération, encapsuler le calcul dans useMemo comme précédemment vous permet de réutiliser les visibleTodos déjà calculés.
Ce type de mise en cache est appelé mémorisation.
Remarque : useMemo ne doit être utilisé que pour optimiser les performances. Si votre code ne fonctionne pas sans, identifiez le problème sous-jacent et corrigez-le d'abord. Vous pouvez ensuite ajouter useMemo pour améliorer les performances.