Comment utiliser useEffect ?

useEffect, c'est quoi ?

useEffect est un hook React qui permet d'effectuer des actions de façon asynchrone en fonction du cycle de vie d’un composant, c’est-à-dire quand il est monté (mount), mis à jour (update) et démonté (unmount).

Quand l’utiliser ?

3 cas courants : récupérer des données, mettre à jour le DOM et gérer les fonctions de minuterie.

Comment l’utiliser ?

useEffect(function, dependencies?)

useEffect accepte deux arguments :

• function : qu’est-ce qu’on veut exécuter ?
• dependencies (optionnel) : quand on veut l’exécuter ?

Différentes utilisations de dependencies

// Pas de dépendance
useEffect(() => {
  console.log("Je m'exécute à chaque fois que le composant est rendu");
});

// onMount
// Un tableau vide []
useEffect(() => {
  console.log("Je m'exécute une seule fois (Quand le composant est monté)");
}, []);

// onUpdate
// Un tableau avec un state
useEffect(() => {
  console.log("Je m'exécute quand la condition change");
}, [condition]);

Exemples

Changer le titre de la page HTML à chaque fois que l’état count change :

// useEffect avec une dépendance
const [count, setCount] = useState(0);

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

Ajouter un listener lorsque le composant s’affiche :

// useEffect avec un clean up
useEffect(() => {
  const handleClick = () => {
    // Handle the click event
  };

  window.addEventListener("click", handleClick);

  // onUnmount
  return () => {
    // Clean up the event listener
    window.removeEventListener("click", handleClick);
  };
}, []);