Guide détaillé d’utilisation du crochet useMemo() dans React

React est une bibliothèque JavaScript populaire utilisée pour créer des interfaces utilisateur. L’une des principales caractéristiques de React est sa capacité à gérer efficacement l’état et le rendu des composants. Dans certains cas; cependant, les composants de re-rendu peuvent être coûteux en calcul et ralentir l’interface utilisateur. C’est là que le useMemo() le crochet est pratique.

Qu’est-ce que le crochet useMemo() ?

Le useMemo() hook est un hook React intégré qui vous permet d’optimiser les performances de votre application React en mémorisant des calculs coûteux. La mémorisation est le processus de mise en cache des résultats d’un appel de fonction en fonction de ses paramètres d’entrée. Cela signifie que si les paramètres d’entrée d’une fonction restent les mêmes, la fonction renverra la même sortie sans ré-exécuter le calcul.

Syntaxe et paramètres du hook useMemo()

Le useMemo() hook dans React a la syntaxe et les paramètres suivants :

const memoizedValue = useMemo(() => {
  // compute and return the memoized value
}, [dependency1, dependency2, ...]);

Le useMemo() hook prend deux paramètres :

Une fonction qui calcule la valeur mémorisée. Cette fonction n’est exécutée qu’une seule fois lors du rendu initial, et à nouveau uniquement si l’une des dépendances a changé.
Un tableau de dépendances dont dépend la valeur mémorisée. Si l’une de ces dépendances change, la valeur mémorisée sera recalculée.

Le useMemo() hook renvoie une valeur mémorisée qui est calculée par la fonction passée en premier paramètre. Cette valeur ne sera recalculée que si l’une des dépendances a changé.

Explication des paramètres

Fonction mémorisée: C’est la fonction qui calcule la valeur mémorisée. La fonction doit renvoyer la valeur que vous souhaitez mémoriser.
Tableau de dépendances: Il s’agit d’un tableau facultatif de dépendances dont dépend la fonction mémorisée. Si l’une des dépendances change, la fonction mémorisée sera réexécutée. Si ce tableau n’est pas fourni, la fonction mémorisée sera réexécutée à chaque rendu.
Valeur de retour: Le useMemo() hook renvoie la valeur mémorisée, qui peut être utilisée dans votre composant.

Le useMemo() hook peut être utilisé pour mémoriser tout calcul ou calcul coûteux qui doit être effectué dans un composant React. En mémorisant ces valeurs, vous pouvez améliorer les performances de vos composants et éviter des recalculs inutiles.

Exemple

import React, { useMemo } from 'react';
function MyComponent(props) {
  const { data } = props;
  const expensiveResult = useMemo(() => {
    // Perform some expensive computation here
    return data * 2;
  }, [data]);
return (
    <div>
      <p>{expensiveResult}</p>
    </div>
  );
}

Dans cet exemple, nous avons un composant appelé MyComponent qui contient une variable d’état ‘compter’ initialisé à 0 à l’aide de useState() accrocher. Nous avons aussi une variable expensiveCalculation que nous voulons mémoriser pour éviter des re-calculs coûteux.

Le expensiveCalculation la variable est affectée à l’aide de la useMemo() accrocher. La fonction passée à useMemo() calcule un résultat basé sur la valeur de ‘compter‘ variables. Le tableau de dépendances ‘[count]‘ est passé comme deuxième argument à useMemo()ce qui signifie que la fonction ne sera réexécutée que si la valeur de ‘compter‘ changements.

Lorsque le composant est rendu, la valeur de ‘compter‘ et expensiveCalculation sont affichés dans le JSX. Nous avons également un bouton qui, lorsqu’il est cliqué, met à jour la valeur de ‘compter‘ et déclenche un nouveau rendu du composant.

Avec le useMemo() crochet, le calcul coûteux à l’intérieur de la fonction ne s’exécutera que lorsque le ‘compter‘ changements de variables. Si la ‘compter‘ reste le même, le résultat précédent est renvoyé sans qu’il soit nécessaire de recalculer. Cela améliore les performances du composant en réduisant les recalculs inutiles du résultat coûteux.

Avantages de l’utilisation de useMemo()

Voyons maintenant quelques-uns des avantages de l’utilisation useMemo():

Performance améliorée: En mettant en cache les résultats de calculs coûteux, useMemo() peut améliorer considérablement les performances de votre application React. Ceci est particulièrement utile lorsqu’il s’agit de grandes quantités de données ou de calculs complexes.
Réduit les rendus inutiles: Lorsqu’un composant est restitué, il peut déclencher la réexécution de toutes les fonctions du composant. En utilisant useMemo()vous pouvez éviter de réexécuter inutilement des fonctions, ce qui peut améliorer les performances de votre application.
Lisibilité améliorée: En séparant les calculs coûteux du reste de votre code de composant, votre code peut devenir plus lisible et plus facile à maintenir.

Il est important de noter que useMemo() n’est pas toujours nécessaire. Dans certains cas, les avantages en termes de performances peuvent ne pas être suffisamment significatifs pour justifier la complexité supplémentaire de l’utilisation useMemo(). De plus, si la fonction que vous mémorisez n’est pas chère, useMemo() peut ne fournir aucun avantage en termes de performances.

useMemo() est un outil puissant qui peut améliorer considérablement les performances de votre application React. En mettant en cache les résultats de calculs coûteux, vous pouvez éviter la réexécution inutile de fonctions et améliorer la réactivité globale de votre interface utilisateur. Cependant, il est important d’utiliser useMemo() judicieusement et uniquement lorsque cela est nécessaire.

Cas d’utilisation courants pour useMemo()

Voici quelques cas d’utilisation courants pour le useMemo() crochet dans React :

Calculs complexes ou traitement de données: Si votre composant doit effectuer des calculs complexes ou traiter de grandes quantités de données, vous pouvez utiliser useMemo() pour mémoriser le résultat et éviter les recalculs inutiles.
Filtrage ou tri des données: Si votre composant doit filtrer ou trier des données en fonction de certains critères, vous pouvez utiliser useMemo() pour mémoriser le résultat filtré ou trié et éviter de retraiter les données à chaque rendu.
Fonctions de rappel de mémorisation: Si votre composant a une fonction de rappel qui est transmise aux composants enfants en tant que prop, vous pouvez utiliser useMemo() pour mémoriser la fonction et éviter les rendus inutiles des composants enfants.
Rendu coûteux: Si votre composant a un grand nombre de composants enfants ou une logique de rendu complexe, vous pouvez utiliser useMemo() pour mémoriser la sortie rendue et éviter les re-rendus inutiles.
Optimisation des appels API : Si votre composant effectue des appels d’API en fonction des actions de l’utilisateur, vous pouvez utiliser useMemo() pour mémoriser la réponse de l’API et éviter une nouvelle récupération inutile des données.

Il est important de noter que tandis que useMemo() peut améliorer les performances de vos composants React, ce n’est pas toujours nécessaire. Vous ne devez utiliser que useMemo() lorsque vous avez identifié un goulot d’étranglement de performances et que la mémorisation améliorerait considérablement les performances de votre composant. De plus, vous devez toujours mesurer l’impact sur les performances de l’utilisation useMemo() avant et après la mise en œuvre pour s’assurer qu’il offre un avantage mesurable.

Conclusion

En conclusion, le useMemo() hook dans React est utilisé pour mémoriser le résultat d’un calcul coûteux et le recalculer uniquement lorsque ses dépendances changent. Cela peut améliorer les performances de vos composants React en évitant les re-rendus inutiles et en réduisant la charge sur le navigateur. Il est important d’utiliser useMemo() avec parcimonie, fournissez un tableau de dépendances et évitez les dépendances complexes.