useMemo Hook expliqué

Le hook useMemo fait partie de l'API Hooks de React, introduite dans React 16.8, conçue pour optimiser les performances en mémorisant les résultats de calculs coûteux. Voici une explication détaillée :

Qu’est-ce qu’useMemo ?

useMemo est un hook qui renvoie une valeur mémorisée. Il vous permet de mettre en cache le résultat d'un calcul afin qu'il n'ait pas besoin d'être recalculé à chaque rendu, sauf si ses dépendances changent. Cela peut aider à éviter les nouveaux rendus inutiles et à améliorer les performances de votre application React.

Syntaxe

const memoizedValue = useMemo(() => {
  // computation or expensive calculation
  return value;
}, [dependencies]);

Paramètres

1. Fonction (rappel) : Une fonction qui renvoie une valeur que vous souhaitez mémoriser.
2. Tableau de dépendances : Un tableau de dépendances qui, une fois modifiées, entraîneront le recalcul de la valeur mémorisée. Si ce tableau est vide, la valeur ne sera calculée qu'une seule fois (comme ComponentDidMount).

Comment ça marche

• Lors du rendu initial, useMemo exécutera la fonction fournie et renverra son résultat, qui est stocké dans memoizedValue.
• Lors des rendus suivants, React vérifiera si l'une des dépendances a changé. Si ce n’est pas le cas, il renverra la valeur mise en cache au lieu de la recalculer.
• Si une dépendance a changé, React exécutera à nouveau la fonction, mettra à jour la valeur mise en cache et renverra la nouvelle valeur.

Exemple

Voici un exemple simple pour illustrer useMemo :

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = ({ number }) => {
  const computeFactorial = (n) => {
    console.log('Calculating factorial...');
    return n <= 0 ? 1 : n * computeFactorial(n - 1);
  };

  // Use useMemo to memoize the factorial calculation
  const factorial = useMemo(() => computeFactorial(number), [number]);

  return (
    <div>
      <h1>Factorial of {number} is {factorial}</h1>
    </div>
  );
};

const App = () => {
  const [num, setNum] = useState(0);

  return (
    <div>
      <button onClick={() => setNum(num + 1)}>Increase Number</button>
      <ExpensiveComponent number={num} />
    </div>
  );
};

export default App;

Quand utiliser useMemo

• Calculs coûteux : utilisez useMemo lorsque vous avez des calculs coûteux en termes de performances et qui ne doivent être recalculés que lorsque des entrées spécifiques changent.
• Éviter les rendus inutiles : Si vous transmettez des objets ou des tableaux comme accessoires aux composants enfants, vous pouvez utiliser useMemo pour vous assurer qu'ils ne sont pas recréés à chaque rendu, évitant ainsi les nouveaux rendus inutiles.

Considérations importantes

• Performances : une utilisation excessive de useMemo peut conduire à un code plus complexe et ne génère pas toujours des avantages en termes de performances. Il est préférable de l'utiliser pour des calculs vraiment coûteux.
• Recréation de fonctions : Si vous mémorisez des fonctions, soyez prudent car la définition de la fonction sera toujours recréée à moins qu'elle ne soit enveloppée dans useCallback.

Conclusion

useMemo est un outil puissant dans React pour optimiser les performances en mémorisant les valeurs. Cela peut contribuer à garantir que des calculs coûteux ne sont effectués que lorsque cela est nécessaire, améliorant ainsi l'efficacité de vos composants React. Cependant, il doit être utilisé judicieusement pour éviter une complexité inutile dans votre code.

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!