Qu'est-ce que « useCallback » dans React ?

useCallback est un React Hook qui vous aide à optimiser votre composant en mémorisant les fonctions de rappel. Il garantit que la référence de fonction reste la même d’un rendu à l’autre, à moins que ses dépendances ne changent. Ceci est particulièrement utile lorsque vous transmettez une fonction en tant qu'accessoire aux composants enfants, car cela empêche les rendus ou les réexécutions inutiles des hooks useEffect des composants enfants.

---

Pourquoi utiliser useCallback ?

1. Empêcher les nouveaux rendus inutiles :
   Si vous transmettez une fonction de rappel en tant qu'accessoire à un composant enfant, cette fonction est recréée à chaque rendu. Cela peut entraîner un nouveau rendu inutile des composants enfants.

2. Références de fonctions stables :
   Si un composant enfant utilise useEffect et dépend de l'accessoire de rappel, une référence de fonction instable entraînera une réexécution inutile de useEffect.

3. Optimiser les performances :
   Aide à éviter les calculs ou les opérations coûteux causés par la recréation fréquente de la même fonction.

---

Syntaxe

const memoizedCallback = useCallback(
  () => {
    // Your logic here
  },
  [dependencies] // Array of dependencies
);

• Fonction de rappel : La fonction que vous souhaitez mémoriser.
• Dépendances : Les valeurs dont dépend la fonction. Si ceux-ci changent, la fonction sera recréée.

---

Exemple Sans utilisationCallback

import React, { useState, useEffect } from "react";

const Child = ({ callback }) => {
  useEffect(() => {
    callback(); // Runs whenever the `callback` reference changes
  }, [callback]);

  return <div>Child Component</div>;
};

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

  const callback = () => {
    console.log("Callback called");
  };

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child callback={callback} />
    </div>
  );
};

export default Parent;

• Problème : Même si le nombre change, le useEffect du composant Enfant est réexécuté car la fonction de rappel est recréée à chaque rendu du Parent.

---

Correction avec useCallback

import React, { useState, useEffect, useCallback } from "react";

const Child = ({ callback }) => {
  useEffect(() => {
    callback(); // Runs only when `callback` changes
  }, [callback]);

  return <div>Child Component</div>;
};

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

  const callback = useCallback(() => {
    console.log("Callback called");
  }, []); // Dependencies are empty, so the callback is memoized

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child callback={callback} />
    </div>
  );
};

export default Parent;

• Solution : Désormais, la référence de rappel reste stable, donc l'useEffect du composant Child ne sera pas réexécuté inutilement.

---

Quand utiliser useCallback ?

• Lorsque vous transmettez des fonctions en tant qu'accessoires aux composants enfants.
• Lorsque le composant enfant utilise React.memo() pour l'optimisation.
• Lorsque le composant enfant dépend de useEffect qui utilise la fonction.

---

Utilisation abusive courante

Ne pas utilisez useCallback pour chaque fonction. Ce n'est bénéfique que si :

1. La fonction est transmise comme accessoire à un enfant.
2. La fonction est coûteuse en calcul à recréer.

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!