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 , les composants sont rendus chaque fois qu'il y a un changement dans l'état ou les accessoires du composant. react 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 à , il mettrait en cache la valeur de 25. Si changé les valeurs à 7, useMemo sait qu'il s'agit d'une dépendance et recalculera à la valeur de 49 et mettra en cache ce résultat à la place. 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 !

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Making security fun one episode at a time

Quand et comment utiliser useMemo dans React

Trop long; Pour lire

Lemons

STORY’S CREDIBILITY

Code License

Guide

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

Quand et comment utiliser useMemo dans React

Trop long; Pour lire

Lemons

STORY’S CREDIBILITY

Code License

Guide

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

HISTOIRES CONNEXES