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

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

Le hook useEffect est un outil précieux pour gérer les effets secondaires dans les composants React. Cependant, par défaut, il s'exécute après chaque rendu, y compris le rendu initial. Cela peut conduire à un comportement indésirable, comme l'illustre l'exemple de code. Pour surmonter cela, il existe deux stratégies efficaces.

1. Utilisation du hook useRef pour suivre le rendu initial

Le hook useRef nous permet de stocker une valeur mutable qui persiste lors des nouveaux rendus. En tirant parti de cela, nous pouvons savoir si c'est la première fois que la fonction useEffect est exécutée.

Exemple :

const { useState, useRef, useEffect } = React;

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

  const firstUpdate = useRef(true);
  useEffect(() => {
    // Skip the initial render
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("useEffect ran");
  });

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

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

2. Utilisation du hook useLayoutEffect

Le hook useLayoutEffect est introduit pour simuler le comportement de composantDidUpdate en termes de phase d'exécution. Il s'exécute avant que le navigateur ne soit peint, évitant ainsi tout problème visuel.

Exemple :

const { useState, useLayoutEffect } = React;

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

  useLayoutEffect(() => {
    console.log("useLayoutEffect ran");
  });

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

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

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!