Hooks `useCallback` et `useMemo`

Améliorer les performances de React : useCallback vs useMemo Hooks

Les hooks useCallback et useMemo de React sont cruciaux pour optimiser les performances de vos applications. Comprendre quand et comment les utiliser peut vous éviter des rendus inutiles et garantir le bon fonctionnement de votre application. Dans cet article, nous plongerons dans des exemples concrets d’utilisation efficace de useCallback et useMemo.

Quand utiliser useCallback

Le hook useCallback renvoie une version mémorisée de la fonction de rappel, ce qui signifie qu'il ne recrée la fonction que si l'une de ses dépendances change. Ceci est particulièrement utile lors du passage de fonctions en tant qu'accessoires aux composants enfants pour éviter qu'ils ne soient restitués inutilement.

Exemple en temps réel : éviter les nouveaux rendus inutiles

Supposons que vous ayez un composant parent qui transmet une fonction à un composant enfant. Sans useCallback, le composant enfant serait restitué à chaque rendu du composant parent, même si la logique de la fonction n'a pas changé.

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // Using useCallback to memoize the function
  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <ChildComponent onIncrement={handleIncrement} />
    </div>
  );
};

export default ParentComponent;

Dans l'exemple ci-dessus, handleIncrement est mémorisé avec useCallback. Le ChildComponent ne sera restitué que lorsque le nombre change, évitant ainsi les rerendus inutiles et améliorant les performances.

Quand utiliser useMemo

Le hook useMemo est utilisé pour mémoriser le résultat d'une fonction, en recalculant le résultat mis en cache uniquement lorsqu'une de ses dépendances change. C'est utile pour optimiser les performances dans les situations où une fonction effectue un calcul coûteux.

Exemple en temps réel : optimisation des calculs coûteux

Disons que vous disposez d'un composant qui effectue une opération coûteuse en termes de calcul, comme filtrer une grande liste.

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

const ExpensiveComponent = ({ items }) => {
  const [filter, setFilter] = useState('');

  // Using useMemo to optimize expensive filtering
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        placeholder="Filter items"
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default ExpensiveComponent;

Dans cet exemple, useMemo est utilisé pour mettre en cache le résultat du filtrage du tableau d'éléments. De cette façon, l'opération de filtrage coûteuse n'est recalculée que lorsque les éléments ou le filtre changent, évitant ainsi les calculs inutiles.

Directives d'utilisation de useCallback et useMemo

• Utilisez useCallback lorsque vous transmettez des fonctions aux composants enfants pour éviter les nouveaux rendus inutiles.
• Utilisez useMemo pour les calculs coûteux qui n'ont pas besoin d'être recalculés à chaque rendu.
• Évitez d'en abuser. La mémorisation ajoute de la complexité et peut parfois rendre le code plus difficile à lire. Utilisez-les uniquement lorsque vous identifiez un problème de performances.
• N'oubliez pas le tableau des dépendances. Spécifiez toujours les dépendances avec précision ; sinon, vous pourriez rencontrer des bugs ou un comportement inattendu.

Conclusion

Les hooks useCallback et useMemo de React sont des outils puissants pour optimiser les performances des composants en évitant les nouveaux rendus inutiles et les calculs coûteux. En appliquant soigneusement ces hooks, vous pouvez garantir que votre application React fonctionne efficacement.

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!