Comment utiliser le hook useMemo React

Découvrez à quoi sert le hook useMemo React et comment l'utiliser!

Découvrez monPrésentation des crochets Reactd'abord, si vous êtes nouveau pour eux.

Un hook React que j'utilise parfois estuseMemo.

import React, { useMemo } from 'react'

Ce hook est utilisé pour créer une valeur mémorisée.

Ce crochet est très similaire àuseCallback, la différence est queuseCallbackrenvoie un rappel mémorisé etuseMemorenvoie une valeur mémorisée, le résultat de cet appel de fonction. Le cas d'utilisation est également différent.useCallbackest utilisé pour les rappels passés aux composants enfants.

Parfois, vous devez calculer une valeur, soit par un calcul complexe, soit en accédant à la base de données pour effectuer une requête coûteuse ou au réseau.

En utilisant ce hook, cette opération n'est effectuée qu'une seule fois, puis la valeur sera stockée dans la valeur mémorisée et la prochaine fois que vous voudrez la référencer, vous l'obtiendrez beaucoup plus rapidement.

Voici comment l'utiliser:

const memoizedValue = useMemo(() => expensiveOperation())

Assurez-vous d'ajouter ce tableau vide comme deuxième paramètre àuseMemo(), sinon aucune mémorisation ne se produira du tout.

Si vous avez besoin de passer des arguments, vous devez également les transmettre dans le tableau:

const memoizedValue = useMemo(() => expensiveOperation(param1, param2), [param1, param2])

Si l'un des paramètres change lorsque vous essayez d'accéder à la valeur, la valeur bien sûr sera calculée sans mémorisation.

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: