Pourquoi useEffect s'exécute-t-il lors du rendu initial dans React ?

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

La documentation React indique que la méthode de cycle de vie componentDidUpdate() n'est pas invoquée pendant le rendu initial. Cependant, lorsque vous utilisez le hook useEffect pour simuler composantDidUpdate(), il semble s'exécuter à chaque rendu, y compris le premier.

Explication

Le hook useEffect s'exécute après chaque cycle de rendu, y compris le cycle initial. Contrairement à la méthode composantDidUpdate(), elle n'a pas de vérification intégrée pour ignorer la première exécution.

Solution

Il existe deux approches pour résoudre ce problème :

1. Utilisation de useRef

Nous pouvons utiliser le hook useRef pour savoir si c'est la première fois que la fonction useEffect est appelée.

const isFirstRender = useRef(true);

useEffect(() => {
  if (isFirstRender.current) {
    isFirstRender.current = false;
    return; // Skip the first render
  }

  console.log("Component did update");
}, [<dependencies>]);

2. L'utilisation de useLayoutEffect

useLayoutEffect est similaire à useEffect, mais elle s'exécute dans la même phase que componentDidUpdate(), qui se produit après les opérations DOM.

useLayoutEffect(() => {
  console.log("Component did update");
}, [<dependencies>]);

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!