Apprenez à utiliser le hook useMemo une fois pour toutes

Plongez en profondeur dans le hook useMemo de React et apprenez quand l’utiliser, quand l’éviter et quelles erreurs éviter afin de réduire les calculs coûteux.

Si vous êtes un développeur React, vous connaissez probablement crochets. Et si vous êtes un développeur méticuleux, vous voulez vous assurer que votre code est optimisé pour les performances. C’est là que le useMemo le crochet entre.

Dans cet article, nous explorerons les useMemo hook et vous montrer comment l’utiliser efficacement pour améliorer les performances de votre application React.

Un bref aperçu des React Hooks

Les React Hooks ont été introduits dans React 16.8. C’était l’une des versions les plus essentielles de React et elle a changé la façon dont nous construisons des applications modernes. Être capable de gérer l’état à l’intérieur des composants fonctionnels était génial, rendant nos applications plus lisibles, évolutives et réutilisables. Nous pourrions créer des hooks personnalisés utilisables sur différents composants.

Bien sûr, c’était il y a quelque temps. Depuis, la communauté a évolué et créé de nouvelles choses.

Plusieurs hooks intégrés sont disponibles dans React, notamment useState, useMemo, useEffect et useCallback. Chaque crochet répond à un objectif spécifique et peut être utilisé pour améliorer la fonctionnalité de vos composants.

Le useState Le hook est le plus simple : il est utilisé pour gérer l’état des composants fonctionnels. Vous avez travaillé avec lui si souvent que nous n’avons pas besoin d’en dire grand-chose, alors parlons des trois hameçons qui effraient les gens et leur rendent la vie plus difficile.

Le useEffect, useMemo et useCallback les hooks sont considérés comme plus complexes à comprendre et à utiliser que les autres hooks car ils sont conçus pour répondre à des besoins plus complexes.

Nous n’avons pas le temps de discuter de ces trois éléments dans cet article, mais nous allons approfondir le sujet. useMemo crochet spécifiquement.

Les bases du useMemo Hook

Le useMemo hook est intégré à React, vous permettant de mémoriser une valeur. Autrement dit, useMemo met en cache le résultat d’une fonction et renvoie la valeur mise en cache chaque fois qu’elle est appelée à nouveau avec les mêmes arguments. La mise en cache optimise les performances et réduit les calculs inutiles, ce qui est particulièrement utile lorsque des calculs coûteux sont déclenchés fréquemment.

Voici comment vous pouvez utiliser useMemo:

1. Définissez une fonction qui calcule la valeur que vous souhaitez mémoriser.
2. Enveloppez la fonction dans le useMemo crochet.
3. Passez les dépendances (c’est-à-dire les valeurs dont dépend la valeur mémorisée) comme deuxième argument à useMemo.
4. Utilisez la valeur mémorisée dans votre composant.

const cachedValue = useMemo(calculateValue, dependencies)

Une chose à retenir avec useMemo c’est que ce n’est que parfois nécessaire. Si le calcul n’est pas coûteux ou n’a pas besoin d’être recalculé fréquemment, vous n’aurez peut-être pas besoin d’utiliser ce hook. En utilisant useMemo inutilement peut nuire aux performances, car cela ajoute une surcharge à votre composant.

Une autre chose à retenir est que useMemo mémorise uniquement le résultat de la fonction. Si la fonction a des effets secondaires (c’est-à-dire qu’elle modifie l’état ou interagit avec le DOM), ils se produiront toujours à chaque appel de la fonction, même si le résultat est mémorisé. Dans ces cas-là, vous devez utiliser le useCallback crochet au lieu de cela, qui mémorise l’intégralité de la fonction (y compris ses effets secondaires).

Éviter les erreurs d’utilisation courante des mémos

Alors que useMemo peut être un outil puissant, il est essentiel de l’utiliser correctement. Voici quelques erreurs courantes à éviter :

Passer les dépendances inutiles

Si vous incluez des dépendances inutiles, la valeur mémorisée sera recalculée inutilement, ce qui peut nuire aux performances. Assurez-vous de mémoriser uniquement les dépendances qui affectent la valeur.

import React, { useMemo } from 'react';
    
const UserComponent = ({ firstName, lastName }) => {
  const fullName = useMemo(() => {
    return `${firstName} ${lastName}`;
  }, [firstName, lastName]);

  return <div>{fullName}</div>;
};

export default UserComponent;

Chaque fois que vous utilisez des hooks React avec un tableau de dépendances (non exclusif pour useMemo), il est essentiel d’inclure les dépendances qui impactent directement la valeur mémorisée. Dans ce cas, vous ne devriez avoir [firstName, lastName] dans le tableau de dépendances pour éviter des recalculs inutiles lorsque des valeurs non pertinentes changent.

Mémoriser des valeurs grandes ou complexes

Si une valeur est grande ou complexe, sa mémorisation peut diminuer les performances plutôt que de les améliorer. C’est parce que le useMemo hook doit calculer et mettre en cache la valeur, ce qui peut prendre du temps.

import React, { useMemo } from 'react';
    
const UserDataComponent = ({ data }) => {
  const processedData = useMemo(() => {
   
    
    return processedData;
  }, [data]);

  return <div>{processedData}</div>;
};
    
export default UserDataComponent;

Imaginez que l’accessoire de données soit étendu, un objet contenant plusieurs objets et de nombreuses autres structures à l’intérieur. Dans ce cas, ce processus de mise en cache peut prendre beaucoup de temps et de ressources, ce qui risque de diminuer les performances plutôt que de les améliorer.

Lorsque la valeur mémorisée est grande ou implique des calculs complexes, nous devons nous rappeler que la mémorisation est plus efficace lorsqu’elle est appliquée à des valeurs coûteuses à calculer mais ayant des dépendances relativement stables.

Utiliser useMemo de manière excessive

Bien que useMemo peut être utile, il ne faut pas l’utiliser de manière excessive. Utilisez-le uniquement dans les cas où vous disposez d’une fonction coûteuse en calcul qui doit être mémorisée.

Il est important de noter que useMemo n’est pas une solution miracle pour optimiser les performances de votre application React. Bien que cela puisse être utile dans certains cas, une utilisation excessive peut entraîner une diminution des performances. Il est essentiel d’utiliser useMemo judicieusement et uniquement lorsque cela est nécessaire.

Il est également essentiel de réfléchir attentivement aux dépendances à inclure dans le tableau. L’inclusion d’une dépendance qui n’affecte pas la valeur mémorisée peut entraîner des rendus inutiles et une diminution des performances.

Mettre useMemo au travail

Maintenant que tu comprends comment useMemo fonctionne, regardons quelques exemples de la façon dont vous pouvez l’utiliser dans votre code.

Mémoriser un tableau filtré

Imaginez un scénario dans lequel vous disposez d’une longue liste d’éléments à filtrer en fonction d’une requête de recherche. Lorsque l’utilisateur saisit la requête de recherche, vous souhaitez afficher uniquement les éléments qui correspondent à la requête. Cependant, calculer la liste filtrée à chaque fois que l’utilisateur saisit un nouveau caractère peut s’avérer coûteux. C’est ici que useMemo peut aider.

import React, { useState, useMemo } from 'react';
    
const FiltersComponent = ({ items, filters }) => {
  const [query, setQuery] = useState('');
    
  const filteredItems = useMemo(() => {
    const filtered = items.filter((item) =>
     item.toLowerCase().includes(query.toLowerCase())
    );

    return filtered;
  }, [items, query, filters]);
    
  const handleSearchChange = (event) => {
    setQuery(event.target.value);
  };

  return (
    <div>
      <input type="text" value={searchQuery} onChange={handleSearchChange} />
      <ul>
        {filteredItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
};
    
export default FiltersComponent;

Dans cet exemple, le filteredItems le tableau est mémorisé en utilisant useMemo. La fonction dépend des éléments et des filtres, ils sont donc inclus dans le tableau de dépendances. De cette façon, le filteredItems le tableau n’est recalculé que lorsque les éléments ou les filtres changent. Cela peut contribuer à améliorer les performances de votre application, en particulier lorsqu’il s’agit de listes volumineuses.

Mémoriser un calcul coûteux

Il arrive parfois que vous deviez effectuer un calcul coûteux et chronophage. Par exemple, vous devrez peut-être effectuer un calcul complexe ou parcourir un grand ensemble de données. Dans de tels cas, la mémorisation du résultat peut contribuer à améliorer les performances de votre application.

import React, { useMemo } from 'react';
    
const ExpensiveResultComponent = () => {
  const expensiveResult = useMemo(() => {
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
      result += i;
    }
    return result;
  }, []);

  return <div>{expensiveResult}</div>;
};
    
export default ExpensiveResultComponent;

Dans l’exemple de code fourni, le expensiveResult est mémorisé en utilisant useMemo. La fonction calcule une valeur à l’aide d’une boucle qui itère un milliard de fois. En mémorisant le résultat, vous pouvez éviter de recalculer la valeur à chaque fois que le composant est restitué. Cela peut aider à améliorer les performances de votre application, en particulier lorsqu’il s’agit de tâches gourmandes en calcul.

Conclusion

Dans l’ensemble, useMemo est un outil puissant qui peut vous aider à améliorer les performances de votre application React. En mémorisant des calculs coûteux ou des tableaux filtrés, vous pouvez éviter les rendus inutiles et améliorer la réactivité de votre application. Il est cependant essentiel d’utiliser useMemo correctement et évitez les erreurs courantes qui peuvent nuire aux performances. Espérons que cet article vous a permis de bien comprendre comment utiliser useMemo une fois pour toutes.