Un guide complet sur le hook useEffect de React : gestion des effets secondaires dans les composants fonctionnels

useEffect Hook dans React

Le hook useEffect est l'un des hooks les plus puissants et essentiels de React. Il vous permet d'effectuer des effets secondaires dans vos composants fonctionnels. Les effets secondaires peuvent inclure des éléments tels que la récupération de données, la manipulation manuelle du DOM, la configuration d'abonnements et le nettoyage des ressources lorsqu'un composant est démonté ou mis à jour.

Avant l'introduction des hooks, les effets secondaires étaient gérés par des méthodes de cycle de vie telles que composantDidMount, composantDidUpdate et composantWillUnmount dans les composants de classe. useEffect consolide toutes ces méthodes de cycle de vie en une seule, ce qui simplifie le travail avec les effets secondaires dans les composants fonctionnels.

---

Qu'est-ce que useEffect ?

Le hook useEffect est utilisé pour effectuer des effets secondaires dans les composants React. Il s'exécute après le rendu et peut être contrôlé avec des dépendances pour s'exécuter uniquement lorsque certaines valeurs changent.

Syntaxe :

useEffect(() => {
  // Code for the side effect
  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

• Fonction d'effet : Le premier argument est une fonction dans laquelle l'effet secondaire est effectué.
• Fonction de nettoyage : Si vous renvoyez une fonction à partir de l'effet, elle s'exécutera lorsque le composant sera démonté ou avant que l'effet ne soit réexécuté (utile pour le nettoyage).
• Tableau de dépendances : Le deuxième argument est un tableau facultatif de dépendances. L'effet ne s'exécute que lorsque les valeurs de ce tableau changent.

---

Concepts clés :

1. Exécuter un effet après chaque rendu :

Si aucun tableau de dépendances n'est fourni, l'effet s'exécutera après chaque rendu du composant.

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect has run after every render');
  });

  return <div>Check the console</div>;
};

• Explication : Dans ce cas, l'effet s'exécutera à chaque nouveau rendu du composant.

2. Exécuter un effet une fois (lors du montage) :

Si vous transmettez un tableau de dépendances vide ([]), l'effet ne s'exécutera qu'une seule fois après le rendu initial (similaire à composantDidMount dans les composants de classe).

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect runs only once, after the first render');
  }, []); // Empty dependency array

  return <div>Check the console</div>;
};

• Explication : Ici, l'effet ne s'exécute qu'une seule fois lors du montage du composant (premier rendu).

3. Exécuter un effet sur des dépendances spécifiques :

Si vous transmettez un tableau de dépendances (par exemple, [count]), l'effet s'exécutera chaque fois qu'une valeur de ce tableau change.

useEffect(() => {
  // Code for the side effect
  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

• Explication : L'effet s'exécute chaque fois que la valeur du compteur change. Chaque fois que vous cliquez sur le bouton, setCount met à jour l'état, déclenchant un nouveau rendu et réexécutant l'effet.

4. Fonction de nettoyage :

Si votre effet crée des effets secondaires qui doivent être nettoyés (par exemple, abonnements, minuteries, etc.), vous pouvez renvoyer une fonction de nettoyage à partir de l'effet. Cette fonction sera exécutée avant la réexécution de l'effet ou lorsque le composant est démonté.

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect has run after every render');
  });

  return <div>Check the console</div>;
};

• Explication : Le hook useEffect configure une minuterie lorsque le composant est monté, et la fonction de nettoyage (clearInterval) est appelée lorsque le composant se démonte, évitant ainsi les fuites de mémoire.

5. Effets conditionnels :

Vous pouvez contrôler quand l'effet doit s'exécuter en utilisant le tableau de dépendances. L'effet ne s'exécutera que lorsque l'une des valeurs du tableau change.

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect runs only once, after the first render');
  }, []); // Empty dependency array

  return <div>Check the console</div>;
};

• Explication : Ce composant possède deux hooks useEffect. L'un s'exécute lorsque le décompte change et l'autre s'exécute lorsque le nom change.

---

Cas d'utilisation courants pour useEffect :

1. Récupération de données : useEffect est couramment utilisé pour effectuer des requêtes API ou récupérer des données lorsque le composant est monté ou lorsque des dépendances spécifiques changent.

import React, { useState, useEffect } from 'react';

const Component = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect runs when count changes:', count);
  }, [count]); // Dependency on count

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

1. S'abonner à des événements externes : Par exemple, s'abonner à un WebSocket ou ajouter un écouteur d'événements.

import React, { useState, useEffect } from 'react';

const TimerComponent = () => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setTime((prevTime) => prevTime + 1);
    }, 1000);

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, []); // Empty dependency array to run once on mount

  return <div>Time: {time}</div>;
};

1. Minuteries et intervalles : Configuration et nettoyage des minuteries et des intervalles.

import React, { useState, useEffect } from 'react';

const Component = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Alice');

  useEffect(() => {
    console.log(`Effect runs when 'count' changes: ${count}`);
  }, [count]); // Only runs when count changes

  useEffect(() => {
    console.log(`Effect runs when 'name' changes: ${name}`);
  }, [name]); // Only runs when name changes

  return (
    <div>
      <p>Count: {count}</p>
      <p>Name: {name}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setName(name === 'Alice' ? 'Bob' : 'Alice')}>Change Name</button>
    </div>
  );
};

---

Résumé de l'utilisationEffet :

• useEffect est utilisé pour effectuer des effets secondaires dans les composants fonctionnels.
• Vous pouvez contrôler le moment où l'effet s'exécute en passant un tableau de dépendances.
• Il peut s'exécuter après chaque rendu, une fois lors du montage ou lorsque des valeurs spécifiques changent.
• Les fonctions de nettoyage vous permettent de nettoyer les ressources (par exemple, effacer les minuteries, annuler les requêtes API) lorsque le composant est démonté ou avant que l'effet ne s'exécute à nouveau.
• Cas d'utilisation courants incluent la récupération de données, les écouteurs d'événements et les minuteries.

---

Conclusion

Le hook useEffect est l'un des hooks les plus essentiels de React, vous permettant de gérer les effets secondaires de manière déclarative. Il simplifie le code en consolidant plusieurs méthodes de cycle de vie en une seule et offre une plus grande flexibilité et un plus grand contrôle sur le moment et la manière dont les effets s'exécutent dans vos 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!