useMemo et useCallback sont deux puissants hooks React qui jouent un rôle crucial dans la prévention des rendus inutiles qui aboutissent à l'optimisation des performances des composants. Ce sont des outils essentiels permettant aux développeurs de créer une application React réactive et efficace.

Dans ce guide, nous expliquerons useMemo et useCallback quelles sont leurs similitudes et en quoi ils diffèrent les uns des autres. Nous comprendrons comment les mettre en œuvre, quand utiliser chacun d'eux.

pourquoi devriez-vous utiliser useMemo ou useCallback

Habituellement, dans React, la plupart des calculs sont rapides, mais parfois vous avez un calcul sur un très grand tableau, ou des calculs coûteux qui n'ont pas besoin d'être exécutés à chaque nouveau rendu.

Les hooks useMemo et useCallback peuvent aider à résoudre ce problème en mettant en cache ces calculs coûteux entre les nouveaux rendus.

qu'est-ce que useMemo et comment l'utiliser.

useMemo est un hook React qui met en cache le résultat d'un calcul entre les rendus et il prend deux arguments :

• CalculatedValue : fonction calculant la valeur que vous souhaitez mettre en cache. La fonction ne doit accepter aucun paramètre, elle doit être pure et renvoyer tout type de valeur. React renverra le même résultat calculé si les dépendances n'ont pas changé, sinon il calculera un nouveau résultat et le mettra en cache.
• dépendances : la liste de toutes les références de valeurs réactives qui se trouvent à l'intérieur de votre CalculatedValue, à partir des constantes de variables d'état et des appels de fonction. React essaiera de comparer chaque valeur réactive avec sa valeur précédente à l'aide de la comparaison Object.it.

utilisation de useMemo

Pour mettre en cache un calcul entre les rendus, enveloppez-le dans un hook useMemo au niveau supérieur du composant.

useMemo(fn, dépendances)

const App = () => {
  const useMemo(() => {
    filterTodo(todos, tab)
  }, [todos, tab])
  return(...)
}

export default App

Notez que le premier paramètre de useMemo est une fonction sans paramètre.

La première fois, React calculera la valeur de résultat du premier paramètre de useMemo, puis mémorisera le deuxième paramètre qui est la liste des dépendances. React mettra en cache le résultat calculé entre les rendus et ne recalculera le résultat que lorsque l'une des valeurs de dépendance change.

qu'est-ce que useCallback et comment l'utiliser.

useCallback est le même que le hook useMemo avec la seule différence que ce hook mettra en cache la fonction (premier paramètre pour useCallback) sans calculer la valeur. La fonction peut également accepter des paramètres contrairement à useMemo.

Pour utiliser useCallback, vous devez transmettre des paramètres :

• Une définition de fonction qui doit être mise en cache.
• Liste des dépendances

const cachedFn = useCallback(fn, dépendances)

import { useCallback } from 'react';

export default function ProductPage({ productId }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/'   productId   '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

Quand utiliser useMemo plutôt que useCallback

Si vous souhaitez principalement optimiser le résultat du calcul, utilisez useMemo.
Si vous souhaitez principalement éviter les rendus inutiles dus à des modifications de fonctions, utilisez useCallback.

Ignorer les nouveaux rendus d'un composant

Parfois, vous aurez besoin d'un nouveau rendu d'un composant parent, ce qui entraînera également le nouveau rendu du composant enfant. Il est possible de mettre en cache un composant à l'aide de mémo.

Supposons que nous ayons un composant Todolist avec un état de thème et un composant List comme enfant. Chaque fois que l'état du thème change, le rendu du composant de liste n'est pas nécessaire. pour résoudre ce problème, utilisez le mémo.

nous enveloppons le composant fonctionnel de List avec un mémo.

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    

      
    
  );
}

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

Conclusion

Dans ce guide complet, nous avons compris les hooks useMemo et useCallback, comment utiliser chacun d'eux, quand utiliser chacun d'eux et expliqué leurs avantages pour optimiser les performances de l'application React.