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 setup doit être une fonction fléchée et que dependencies doit ê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>])

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 puissante combinaison 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, le hook useEffect est utilisé pour garantir que l’état articles soit alimenté en données. Comme mentionné précédemment, la fonction useEffect s’exécute après chaque rendu, assurant ainsi l’affichage des données à l’utilisateur si elles sont disponibles. 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 afin de 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 que nous l'utiliserons ;
  • Ligne 8 : appel de la fonction fetchData. Cette fonction est censée 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 affichée dans la console via console.error.
• Lignes 17-19 : Rendu du balisage du composant.

Code complet de l'application :

Exemple 2 :

Création du composant Counter pour suivre la valeur d'un counter. L'objectif est d'enregistrer la valeur de la variable counter à chaque modification. Pour cela, le hook useEffect sera utilisé 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 afin de bénéficier de leurs fonctionnalités ;
• Ligne 3 : Syntaxe fonctionnelle conventionnelle définissant le composant "Counter" ;
• Ligne 4 : Initialisation de l’état à l’aide du hook useState, représentant la valeur initiale de la variable count. Dans cet exemple, elle est fixée à 0 ;
• Lignes 6-8 : Cas d’utilisation concret du hook useEffect ;
  • Ligne 7 : Cette logique s’exécute chaque fois que la valeur du tableau de dépendances change. Dans ce cas, il s’agit de la variable count ;
  • Ligne 8 : Tableau de dépendances. Indication à React que lorsque la valeur de la variable count change, le code à l’intérieur de la fonction du hook useEffect doit être exécuté.
• 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 à 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.