Le hook useEffect permet de synchroniser le composant avec des facteurs ou services externes, y compris la récupération de données, les abonnements, les modifications manuelles, etc.

Syntaxe :

Le premier argument (setup) est une fonction fléchée qui sera exécutée après chaque rendu. Le second argument (dependencies) est un tableau optionnel de dépendances. Si les dependencies sont fournies, l'effet ne sera ré-exécuté que si l'une des dépendances a changé depuis le dernier rendu. Si le tableau de dépendances est omis, l'effet s'exécutera après chaque rendu.

useEffect(setup, dependencies)

Puisque nous savons que la fonction setup doit être une fonction fléchée et que les dependencies doivent être un tableau, nous obtenons l'enregistrement suivant du hook useEffect.

useEffect(() => {
  // Something that we need to do
  // after the component is rendered or updated
}, [<optional_dependencies>])

Remarque

Les composants React s'appuient souvent sur la combinaison des hooks useEffect et useState. Ces hooks fonctionnent conjointement pour gérer l'état et les effets de bord au sein des composants.

Exemple 1 :

Création du composant Articles, qui utilisera le hook useEffect pour affecter des données à l'état articles. Cette approche permet d'explorer la combinaison puissante des hooks React.

import { useEffect, useState } from "react";
import fetchData from "../service/api";

const Articles = () => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetchData()
      .then((resp) => {
        setArticles(resp.jokes);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return (
    // Render some markup based on the articles data
  );
};

Dans ce composant, nous utilisons le hook useEffect afin de garantir que l’état articles soit alimenté avec des données. Comme mentionné précédemment, la fonction useEffect s’exécute après chaque rendu, assurant ainsi que les données seront affichées à l’utilisateur si elles sont obtenues. Cela garantit une expérience utilisateur fluide avec un contenu à jour.

Explication ligne par ligne :

• Ligne 1 : Importation des hooks useEffect et useState depuis la bibliothèque React pour bénéficier de leurs fonctionnalités ;
• Ligne 2 : Importation de la fonction fetchData depuis "../service/api". Cette fonction est responsable de l’envoi d’une requête API et de la récupération des données ;
• Ligne 4 : Définition du composant Articles en utilisant la syntaxe fonctionnelle conventionnelle ;
• Ligne 5 : Initialisation de l’état avec le hook useState, représentant la valeur initiale de la variable articles. Dans cet exemple, il s’agit d’un tableau vide ;
• Lignes 7-15 : Cas d’utilisation réel du hook useEffect ;
  • Ligne 7 et ligne 15 : syntaxe d’utilisation. C’est ainsi qu’il sera utilisé ;
  • Ligne 8 : appel de la fonction fetchData. Cette fonction doit effectuer une requête API et retourner une promesse ;
  • Lignes 9-11 : Lorsque la promesse est résolue (bloc then), un objet resp est reçu. Les données sont extraites de resp via resp.jokes, puis affectées à l’état articles à l’aide de setArticles ;
  • Lignes 12-14 : En cas d’erreur lors de la requête API (dans le bloc catch), celle-ci est enregistrée dans la console avec console.error.
• Lignes 17-19 : Rendu du balisage du composant.

Code complet de l’application :

Exemple 2 :

Créons le composant Counter pour suivre une valeur de counter. L'objectif est d'enregistrer la valeur de la variable counter à chaque fois qu'elle change. Pour cela, nous utiliserons le hook useEffect avec un tableau de dépendances contenant la variable counter.

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

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

  useEffect(() => {
    console.log("Count has changed:", count);
  }, [count]);

  const handleIncrement = () => {
    setCount(count + 1);
  };

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

Explication ligne par ligne :

• Ligne 1 : Importation des hooks useEffect et useState depuis la bibliothèque React pour exploiter leurs fonctionnalités ;
• Ligne 3 : Syntaxe fonctionnelle conventionnelle pour définir le composant "Counter" ;
• Ligne 4 : Initialisation de l'état avec le hook useState, représentant la valeur initiale de la variable count. Dans cet exemple, elle est à 0 ;
• Lignes 6-8 : Utilisation concrète du hook useEffect ;
  • Ligne 7 : Cette logique s'exécutera chaque fois que la valeur dans le tableau de dépendances change. Dans ce cas, il s'agit de la variable count ;
  • Ligne 8 : Tableau de dépendances. On indique à React que lorsque la valeur de la variable count change, le code à l'intérieur de la fonction du hook useEffect doit s'exécuter.
• Lignes 14-19 : Rendu du balisage du composant.

Code complet de l'application :

Veuillez prendre un moment pour inspecter la console et observer la logique d'exécution de la fonction fléchée à l'intérieur du hook useEffect. La fonction fléchée est d'abord exécutée lors du rendu initial, puis appelée de nouveau chaque fois que la valeur de la variable counter change. Vous pouvez vérifier ce comportement en observant les journaux correspondants dans la console.