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

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

Dans React, le hook useEffect fournit une fonctionnalité similaire à la méthode de cycle de vie composantDidUpdate. Cependant, contrairement à composantDidUpdate, useEffect s'exécute après chaque rendu, y compris le rendu initial. Cela peut être un comportement indésirable lorsque nous souhaitons que l'effet ne s'exécute qu'après des mises à jour ultérieures.

Pour empêcher useEffect de s'exécuter sur le rendu initial, nous pouvons exploiter deux approches :

Utiliser le hook useRef

Le hook useRef nous permet de stocker une valeur mutable qui persiste entre les rendus. Nous pouvons l'utiliser pour savoir si c'est la première fois que la fonction useEffect est invoquée.

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

  // Run the effect after the initial render
  console.log("useEffect ran after first render");
}, []);

À l'aide du hook useLayoutEffect

Alternativement, nous pouvons utiliser le useLayoutEffect crochet. Contrairement à useEffect, useLayoutEffect s'exécute de manière synchrone après les mises à jour du DOM, ce qui est le même comportement que componentDidUpdate.

useLayoutEffect(() => {
  // Run the effect after the initial render
  console.log("useLayoutEffect ran after first render");
}, []);

Ces approches empêchent efficacement useEffect de s'exécuter sur le rendu initial, garantissant que l'effet ne se produit qu'après mises à jour, tout comme ComponentDidUpdate.

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!