Quand et comment utiliser useMemo dans React

En travaillant dans le développement frontend, vous avez peut-être rencontré useMemo. Pour ceux qui ne le connaissent pas, nous expliquerons comment utiliser useMemo dans React ainsi que les cas d'utilisation les plus importants/proéminents.

Qu'est-ce que useMemo ?

useMemo est un excellent crochet intégré qui peut améliorer les performances de votre application Web. Nous savons que dans react , les composants sont rendus chaque fois qu'il y a un changement dans l'état ou les accessoires du composant.

Les composants restitués recalculeront également les fonctions qui y sont utilisées.

Par conséquent, s'il y a des fonctions lourdes et coûteuses, les performances peuvent être affectées car elles doivent être calculées à chaque fois. useMemo aide à mémoriser ces fonctions afin d'optimiser les performances.

Comment useMemo fonctionne-t-il dans React ?

Afin de comprendre useMemo, nous devons réfléchir à ce qu'est la mémorisation .

S'il existe une fonction coûteuse, telle que la récupération d'un grand nombre de données, la mémorisation est un moyen de stocker le résultat de cette fonction afin qu'elle n'ait pas à être appelée encore et encore.

useMemo prendra la fonction qu'il encapsule et mettra en cache les résultats de cette fonction afin qu'elle puisse vous être fournie si nécessaire sans refaire les calculs.

Comment utilisez-vous useMemo dans React ?

En tant que crochet intégré, vous pouvez importer le crochet depuis React et l'utiliser au niveau supérieur.

Ensuite, vous pouvez envelopper votre calcul coûteux avec useMemo en déclarant une constante ou une variable et en l'affectant au résultat de votre crochet.

N'oubliez pas d'ajouter vos dépendances car c'est ainsi que useMemo détermine s'il doit recalculer la fonction à nouveau.

Si votre dépendance change, alors useMemo saura recalculer la valeur afin de mettre en cache le bon résultat à tout moment.

 import { useMemo } from 'react' ; function someExpensiveFunction ( n ) {   return n * n; } function myFunction ( {n} ) {   const result = useMemo( () => someExpensiveFunction(n), [n]);   return (       < div > {result} </ div >
 ); }

Par exemple, si vous avez passé la valeur 5 à

 n

 n

Ceci est particulièrement utile lorsque votre application frontale envoie des requêtes à une API.

Ces requêtes peuvent coûter cher, surtout si vous récupérez de grandes quantités de données.

Peut-être que votre application a des composants qui ont besoin de ces données, mais vous ne voulez pas faire un appel d'API chaque fois que le composant est rendu.

Ensuite, la mise en cache de vos résultats avec useMemo peut être votre meilleur pari.

 import React, { useMemo } from 'react' ; import axios from 'axios' ; const ApiComponent = () => {   const memoizedResults = useMemo( async () => {       try {           const apiResponse = await axios.get( 'http://apicall.com/somedata' );           return apiResponse.data; } catch (error) {           return error; } }, []);   return (       < div > {apiResponse} </ div >
 ) }

Comme vous pouvez le voir, notre dépendance est vide car nous ne voulons qu'elle s'affiche qu'une seule fois, car la valeur ne changera pas réellement. Nous voulons juste faire l'appel d'API une fois, lors du premier rendu.

Ensuite, cette valeur sera réutilisée dans les rendus suivants.

Quand utiliser useMemo est-il une mauvaise idée ?

Aussi utile que soit le crochet, utiliser useMemo en permanence n'est pas nécessairement une bonne idée. Il peut être tentant d'envelopper chaque fonction que vous écrivez avec useMemo afin de "sauvegarder" les calculs.

Cependant, l'utiliser lorsqu'il n'est pas nécessaire peut en fait ralentir votre application.

1. Calculs triviaux

Si la fonction que vous encapsulez avec useMemo est un calcul simple, le coût d'utilisation de useMemo peut être plus important.

Si vous êtes en mesure de déterminer que le poids de votre fonction est assez petit, par exemple, le temps O(n), alors il convient de déterminer que le crochet n'est pas nécessaire.

2. Lorsque votre fonction peut affecter des états et des variables externes

Si votre fonction implique d'apporter des modifications à d'autres variables globales ou en dépend, l'utilisation de useMemo n'est peut-être pas une bonne idée.

Comme décrit précédemment, useMemo ne recalcule la fonction que lorsqu'une dépendance change.

Cependant, si la fonction utilise des variables ou des appels qui ne sont pas nécessairement un changement de dépendance, elle ne recalculera pas la valeur, ce qui rendra le résultat mis en cache incorrect.

Quelle est la différence entre useMemo et useCallback ?

Certains d'entre vous connaissent peut-être également useCallback, qui sert un objectif similaire à useMemo. Cet article ne plongera pas profondément dans useCallback, mais nous différencierons quand utiliser les deux fonctions.

Il peut être facile de confondre useMemo et useCallback, car ce sont tous deux des hooks qui permettent d'optimiser votre application en mémorisant quelque chose pour vous. Cependant, il est important de noter que la chose qu'ils mémorisent est différente.

Dans la plupart des cas, useMemo mémorise les valeurs tandis que useCallback mémorise les fonctions. Comme indiqué dans le nom, useCallback est utilisé pour mémoriser les fonctions de rappel, en particulier celles qui sont transmises aux composants enfants en tant qu'accessoires. Les fonctions de rappel peuvent dépendre de certaines valeurs ou références qui peuvent changer au fil du temps, ce qui signifie que les mises à jour de ces fonctions entraîneront un nouveau rendu dans les composants qui les utilisent. Par conséquent, les mémoriser peut aider à éviter les nouveaux rendus, ce qui peut nous coûter de l'optimisation.

Cependant, comme useMemo peut mémoriser à la fois des fonctions et des valeurs, il peut être utilisé à la place des crochets useCallback. Néanmoins, il est important de tenir compte du contexte de votre situation et d'utiliser les crochets de manière appropriée pour les utiliser comme prévu.

Dernières pensées

useMemo global… est un excellent crochet flexible qui peut mémoriser les valeurs pour vous et éviter les re-rendus. En utilisant le hook de manière stratégique, vous pouvez optimiser votre application, réduire les calculs et permettre à l'utilisateur d'avoir une expérience plus rapide et plus fluide.

Laissez useMemo offrir à vos utilisateurs une expérience… mémorable !