Comprendre useMemo de React : ce qu'il fait, quand l'utiliser et les meilleures pratiques

React est une bibliothèque puissante pour créer des interfaces utilisateur, mais à mesure que votre application se développe, vous remarquerez peut-être que les performances peuvent parfois devenir un problème. C'est là que les hooks React comme useMemo entrent en jeu. Dans cet article, nous examinerons ce que fait useMemo, quand il est utile et les meilleures pratiques pour l'utiliser. Nous aborderons également quelques pièges courants à éviter.

Qu’est-ce qu’useMemo ?

useMemo est un hook React qui permet de mémoriser le résultat d'un calcul. En termes simples, il mémorise le résultat d'une fonction et ne le recalcule que lorsque ses dépendances changent. Cela peut éviter des calculs inutiles et améliorer les performances.

Voici un exemple de base :

import React, { useMemo } from 'react';

function ExpensiveCalculation({ num }) {
  const result = useMemo(() => {
    console.log('Calculating...');
    return num * 2;
  }, [num]);

  return <div>The result is {result}</div>;
}

Dans cet exemple, la fonction dans useMemo ne s'exécute que lorsque num change. Si num reste le même, React ignorera le calcul et utilisera le résultat précédemment mémorisé.

Pourquoi utiliser useMemo ?

La principale raison d'utiliser useMemo est d'optimiser les performances. Dans React, les composants sont restitués chaque fois que leur état ou leurs accessoires changent. Cela peut conduire à exécuter des calculs coûteux plus souvent que nécessaire, surtout si le calcul est complexe ou si l'arborescence des composants est volumineuse.

Voici quelques scénarios dans lesquels useMemo est particulièrement utile :

1. Calculs coûteux :

Imaginez que vous ayez un composant qui effectue un calcul lourd, comme filtrer un grand ensemble de données. Sans useMemo, ce calcul s'exécuterait à chaque rendu, ce qui pourrait ralentir votre application.

import React, { useMemo } from 'react';

function ExpensiveCalculationComponent({ numbers }) {
  // Expensive calculation: filtering even numbers
  const evenNumbers = useMemo(() => {
    console.log('Filtering even numbers...');
    return numbers.filter(num => num % 2 === 0);
  }, [numbers]);

  return (
    <div>
      <h2>Even Numbers</h2>
      <ul>
        {evenNumbers.map((num) => (
          <li key={num}>{num}</li>
        ))}
      </ul>
    </div>
  );
}

// Usage
const numbersArray = Array.from({ length: 100000 }, (_, i) => i + 1);
export default function App() {
  return <ExpensiveCalculationComponent numbers={numbersArray} />;
}

Dans cet exemple, l'opération de filtrage est coûteuse en calcul. En l'enveloppant dans useMemo, il ne s'exécute que lorsque le tableau de nombres change, plutôt qu'à chaque rendu.

2. Éviter de recréer des objets ou des tableaux

Passer un nouveau tableau ou objet en tant qu'accessoire à un composant enfant à chaque rendu peut entraîner des rendus inutiles, même si le contenu n'a pas changé. useMemo peut être utilisé pour mémoriser le tableau ou l'objet.

import React, { useMemo } from 'react';

function ChildComponent({ items }) {
  console.log('Child component re-rendered');
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default function ParentComponent() {
  const items = useMemo(() => ['apple', 'banana', 'cherry'], []);

  return (
    <div>
      <h2>Fruit List</h2>
      <ChildComponent items={items} />
    </div>
  );
}

Ici, le tableau items est mémorisé à l'aide de useMemo, garantissant que ChildComponent n'est restitué que lorsque cela est nécessaire. Sans useMemo, un nouveau tableau serait créé à chaque rendu, provoquant des rendus inutiles du composant enfant.

3. Optimisation des grandes arborescences de composants

Lorsque vous travaillez avec une grande arborescence de composants, l'utilisation de useMemo peut aider à réduire les rendus inutiles, en particulier pour les opérations coûteuses au sein de composants profondément imbriqués.

import React, { useMemo } from 'react';

function LargeComponentTree({ data }) {
  const processedData = useMemo(() => {
    console.log('Processing data for large component tree...');
    return data.map(item => ({ ...item, processed: true }));
  }, [data]);

  return (
    <div>
      <h2>Processed Data</h2>
      {processedData.map((item, index) => (
        <div key={index}>{item.name}</div>
      ))}
    </div>
  );
}

// Usage
const largeDataSet = Array.from({ length: 1000 }, (_, i) => ({ name: `Item ${i + 1}` }));
export default function App() {
  return <LargeComponentTree data={largeDataSet} />;
}

Dans cet exemple, useMemo est utilisé pour traiter un grand ensemble de données avant de le restituer dans un composant. En mémorisant les données traitées, le composant recalcule les données uniquement lorsque l'accessoire de données d'origine change, évitant ainsi un retraitement inutile et améliorant les performances.

Bonnes pratiques d'utilisationMémo

Bien que useMemo soit un outil puissant, il est important de l’utiliser correctement. Voici quelques bonnes pratiques :

1. Utilisez-le pour l'optimisation des performances : Le coûteuxCalculation est un bon exemple d’utilisation de useMemo. Il effectue une opération potentiellement coûteuse (additionner un tableau et multiplier le résultat) qui dépend des nombres et des variables d'état du multiplicateur.

const expensiveCalculation = useMemo(() => {
  console.log('Calculating sum...');
  return numbers.reduce((acc, num) => acc + num, 0) * multiplier;
}, [numbers, multiplier]);

Ce calcul ne sera réexécuté que lorsque les nombres ou le multiplicateur changeront, ce qui permettra d'éviter des recalculs inutiles lors d'autres rendus.

1. Gardez les dépendances précises : Remarquez comment le hook useMemo pour coûteuxCalculation inclut à la fois des nombres et un multiplicateur dans son tableau de dépendances. Cela garantit que le calcul est réexécuté chaque fois que l'une de ces valeurs change.

}, [numbers, multiplier]);  // Correct dependencies

Si nous avions omis le multiplicateur des dépendances, le calcul ne serait pas mis à jour lorsque le multiplicateur changeait, ce qui entraînerait des résultats incorrects.

1. N'abusez pas de useMemo : L'exemple simpleValue montre une utilisation inutile de useMemo :

const simpleValue = useMemo(() => {
  return 42;  // This is not a complex calculation
}, []);  // Empty dependencies array

Cette mémorisation est inutile car la valeur est constante et le calcul est trivial. Cela ajoute de la complexité sans aucun avantage en termes de performances.

1. Comprenez quand ne pas l'utiliser : La fonction handleClick est un bon exemple de cas où il ne faut pas utiliser useMemo :

const handleClick = () => {
  console.log('Button clicked');
};

Cette fonction est simple et n'implique aucun calcul lourd. Le mémoriser ajouterait une complexité inutile au code sans apporter d’améliorations significatives des performances.

En suivant ces bonnes pratiques, vous pouvez utiliser efficacement useMemo pour optimiser vos composants React sans trop compliquer votre code ni introduire de bogues potentiels dus à une gestion incorrecte des dépendances.

Pièges courants à éviter

Bien que useMemo puisse être un excellent outil, il existe quelques erreurs courantes à surveiller :

1. Ignorer les dépendances : si vous oubliez d'inclure une dépendance dans le tableau, la valeur mémorisée peut devenir obsolète, entraînant des bugs. Vérifiez toujours que toutes les variables utilisées dans la fonction mémorisée sont incluses dans le tableau des dépendances.

2. Utiliser useMemo Everywhere : toutes les fonctions ou valeurs n'ont pas besoin d'être mémorisées. Si votre code ne présente pas de problème de performances, l’ajout de useMemo n’améliorera pas les choses. En fait, cela peut ralentir légèrement les choses en raison de la surcharge de mémorisation.

3. Incompréhension des re-rendus : useMemo optimise uniquement le calcul mémorisé, pas l'ensemble du processus de rendu du composant. Si le composant reçoit toujours de nouveaux accessoires ou un nouvel état, il sera restitué, même si la valeur mémorisée ne change pas.

Conclusion

useMemo est un hook puissant pour optimiser les performances dans les applications React, mais il doit être utilisé à bon escient. Concentrez-vous sur son utilisation là où il existe de réels goulots d'étranglement en termes de performances et assurez-vous toujours que vos dépendances sont correctes. En suivant ces bonnes pratiques, vous pouvez éviter les pièges courants et tirer le meilleur parti de useMemo dans vos projets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!