Comment empêcher « useEffect » de s'exécuter lors du rendu initial dans React ?

Empêcher useEffect de s'exécuter lors du rendu initial

Le hook useEffect() de React imite le comportement de composantDidUpdate(), y compris son invocation après chaque rendu . Cependant, contrairement à composantDidUpdate(), useEffect() s'exécute même lors du rendu initial. Cet article explique comment résoudre ce problème et empêcher useEffect() de s'exécuter pendant la phase de rendu initiale.

Utilisation du useRef Hook

Pour déterminer si useEffect() est exécuté pour la première fois, utilisez le hook useRef(). useRef() stocke une valeur mutable. Dans ce cas, il peut savoir s'il s'agit du rendu initial.

Utilisation de useLayoutEffect

Si l'effet doit se produire au cours de la même phase que ComponentDidUpdate(), envisagez d'utiliser useLayoutEffect () au lieu de useEffect().

Exemple

Le code suivant montre comment empêcher useEffect() de s'exécuter sur le rendu initial à l'aide de useRef() :

const { useState, useRef, useLayoutEffect } = React;

function ComponentDidUpdateFunction() {
  const [count, setCount] = useState(0);

  const firstUpdate = useRef(true);
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("componentDidUpdateFunction");
  });

  return (
    <div>
      <p>componentDidUpdateFunction: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(<ComponentDidUpdateFunction />, document.getElementById("app"));

Dans ce code :

1. Nous définissons une fonction de composant qui utilise useState() pour gérer l'état du comptage et le hook useRef() pour suivre la première mise à jour.
2. Nous utilisons useLayoutEffect() pour exécuter l'effet pendant la même phase que ComponentDidUpdate().
3. À l'intérieur de l'effet, nous vérifions s'il est la première mise à jour (firstUpdate.current est vrai). Si tel est le cas, nous définissons firstUpdate.current sur false et revenons plus tôt pour empêcher l'effet de s'exécuter.

Lorsque vous exécutez ce code, vous remarquerez que "componentDidUpdateFunction" n'est enregistré qu'après le rendu initial. lorsque l'on clique sur le bouton, imitant le comportement de composantDidUpdate().

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!