Comprendre useEffect dans React : de zéro à héros

React est devenue l'une des bibliothèques JavaScript les plus populaires pour créer des interfaces utilisateur dynamiques. L'un des hooks les plus cruciaux de React est useEffect, qui permet aux développeurs de gérer les effets secondaires dans les composants fonctionnels. Les effets secondaires incluent des opérations telles que la récupération de données, la configuration d'abonnements ou la manipulation manuelle du DOM. Dans ce blog, nous approfondirons ce qu'est useEffect, comment il fonctionne et fournirons des exemples étape par étape pour une meilleure compréhension.

Qu’est-ce que useEffect ?

Dans React, useEffect est un hook intégré qui vous permet d'effectuer des effets secondaires dans les composants de fonction. Les effets secondaires, comme leur nom l'indique, sont des opérations qui affectent quelque chose en dehors de la fonction, comme les appels d'API, les minuteries, la journalisation ou la mise à jour du DOM.

Avant l'introduction des hooks dans React 16.8, vous deviez utiliser des composants de classe et des méthodes de cycle de vie telles que composantDidMount, composantDidUpdate et composantWillUnmount pour gérer les effets secondaires. Désormais, avec useEffect, ces événements du cycle de vie sont combinés en une seule fonction pour les composants fonctionnels.

Pourquoi choisir useEffect ?

useEffect est un hook puissant pour gérer les effets secondaires dans React pour plusieurs raisons :

1. Simplification du code : Il élimine le besoin de composants basés sur les classes et de méthodes de cycle de vie, vous permettant d'écrire un code plus propre et basé sur les fonctionnalités.
2. Effets secondaires centralisés : Vous pouvez gérer tous les effets secondaires, tels que la récupération de données ou la mise à jour du DOM, en un seul endroit.
3. Lisibilité améliorée : Il rationalise la façon dont les événements du cycle de vie sont gérés, rendant le code plus lisible et moins complexe.
4. Flexibilité : Avec useEffect, vous avez plus de contrôle sur le moment et la fréquence d'exécution des effets secondaires, car vous pouvez définir des dépendances qui déterminent quand l'effet doit s'exécuter.

Comment ça marche ?

Le hook useEffect accepte deux arguments :

1. Fonction d'effet : Cette fonction contient la logique des effets secondaires, comme la récupération de données ou la configuration d'un abonnement.
2. Tableau de dépendances (facultatif) : Un tableau de valeurs qui détermine quand l'effet doit être réexécuté. Si une valeur du tableau de dépendances change, l'effet est à nouveau exécuté. Si vous omettez ce tableau, l'effet s'exécutera après chaque rendu.

Voici une structure de base :

useEffect(() => {
  // Side effect logic goes here

  return () => {
    // Optional cleanup function
  };
}, [/* Dependencies go here */]);

Exemple:

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

function ExampleComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetching data when the component mounts
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => response.json())
      .then((json) => setData(json));

    // Optional cleanup (in this case, not needed)
    return () => {
      // Cleanup logic if necessary
    };
  }, []); // Empty array means this effect will only run once when the component mounts

  return 
{data ? data.title : 'Loading...'}
;
}

Dans cet exemple, les données sont récupérées à partir d'une API lors du premier rendu du composant et le résultat est affiché dans l'interface utilisateur. Puisque nous transmettons un tableau de dépendances vide, cet effet ne s'exécute qu'une seule fois après le premier rendu.

Contrôler les effets secondaires lors de l'utilisationEffect

En contrôlant le moment où useEffect s'exécute, nous pouvons optimiser les performances et garantir que les effets secondaires se produisent au bon moment.

Effets sans nettoyage

Tous les effets ne nécessitent pas de nettoyage. Le nettoyage n'est nécessaire que lorsque vous devez supprimer ou réinitialiser quelque chose après l'exécution de l'effet, comme effacer les minuteries ou vous désabonner des flux de données.

Par exemple, voici un scénario dans lequel aucun nettoyage n'est nécessaire :

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

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

  useEffect(() => {
    console.log('Effect without cleanup runs every time the count changes');
  }, [count]); // Runs every time `count` changes

  return (
    

      
{count}
       setCount(count   1)}>Increment
    
  );
}

Dans ce cas, l'effet s'exécute à chaque fois que l'état du comptage change. Puisque nous ne configurons pas d’abonnements ni ne gérons de ressources externes, aucun nettoyage n’est nécessaire.

Effets avec nettoyage

Si votre effet implique la configuration d'abonnements ou de minuteries, vous devrez probablement nettoyer après l'effet. Par exemple, imaginez un scénario dans lequel nous souhaitons configurer une minuterie :

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

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

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

    // Cleanup function to clear the timer
    return () => {
      clearInterval(interval);
    };
  }, []); // Empty dependency array: effect runs once, and cleanup occurs when the component unmounts

  return 
{time} seconds have passed
;
}

Voici ce qui se passe :

1. La fonction setInterval configure une minuterie qui incrémente le temps chaque seconde.
2. La fonction de nettoyage (renvoyée par useEffect) efface l'intervalle de démontage du composant. Cela garantit que le minuteur ne continue pas à fonctionner après la suppression du composant.

Exemples d'utilisationScénarios d'effets

Explorons quelques scénarios courants dans lesquels useEffect est particulièrement utile.

Récupération de données sur le montage de composants

La récupération de données lors du montage du composant est l'un des cas d'utilisation les plus courants de useEffect.

useEffect(() => {
  fetchData();

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  }
}, []); // Empty dependency array means it runs once when the component mounts

Mise à jour du DOM

Vous pouvez utiliser useEffect pour manipuler manuellement le DOM après le rendu, même si cela doit être fait avec parcimonie puisque React gère le DOM efficacement.

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

Nettoyage lors du démontage du composant

Si vous disposez de ressources telles que des abonnements ou des écouteurs d'événements qui doivent être nettoyées, vous pouvez utiliser la fonction de retour dans useEffect pour gérer cela.

useEffect(() => {
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Cleanup listener when the component unmounts

FAQ

1. Que se passe-t-il si j'omise le tableau de dépendances dans useEffect ?

Si vous omettez le tableau de dépendances, useEffect s'exécutera après chaque rendu, ce qui peut entraîner des problèmes de performances pour les effets secondaires coûteux tels que les appels d'API.

2. Puis-je exécuter useEffect une seule fois ?

Oui, transmettre un tableau de dépendances vide [] garantit que l'effet ne s'exécute qu'une seule fois après le montage du composant.

3. Qu'est-ce que la fonction de nettoyage dans useEffect ?

La fonction de nettoyage est un moyen d'annuler l'effet lorsque le composant est démonté ou avant que l'effet ne soit réexécuté. C'est utile pour nettoyer les minuteries, les écouteurs d'événements ou les abonnements.

En conclusion, useEffect est un hook puissant et flexible qui simplifie la gestion des effets secondaires dans React. En contrôlant le moment où les effets secondaires s'exécutent et en nettoyant si nécessaire, vous pouvez optimiser vos composants et éviter les nouveaux rendus inutiles ou les fuites de mémoire. Expérimentez avec les exemples ci-dessus pour maîtriser l'art de la gestion des effets secondaires !