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

Faire en sorte que le crochet useEffect de React évite l'exécution du rendu initial

La méthode de cycle de vie componentDidUpdate() dans les composants React basés sur les classes est invoquée après chaque rendu, sauf le premier. Pour émuler ce comportement avec le hook useEffect, il peut sembler que le hook s'exécute à chaque rendu, y compris la première fois.

Solution

Pour empêcher useEffect de s'exécuter lors du rendu initial, l'utilisation du hook useRef peut aider à déterminer s'il s'agit de l'invocation initiale de l'effet.

De plus, pour imiter le comportement de composantDidUpdate, qui s'exécute dans la phase « effets de mise en page », envisagez d'utiliser useLayoutEffect au lieu de useEffect.

Exemple

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")
);

Cette approche utilise le hook useRef pour suivre la première mise à jour et garantir que l'effet ne s'exécute que lors des mises à jour ultérieures, reflétant le comportement de composantDidUpdate dans les applications basées sur les classes. composants.

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!