Gestion des Effets Secondaires avec useEffect

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éons le composant Articles, qui utilisera le hook useEffect pour affecter des données à l’état articles. Il s’agit d’une excellente occasion 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, nous utilisons le hook useEffect pour 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, garantissant que les données seront affichées à l’utilisateur si elles sont obtenues. Cela assure 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 exploiter 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 : Le composant Articles est défini 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 doit effectuer une requête API et retourner une promesse ;
  • Lignes 9-11 : Lorsque la promesse est résolue (bloc then), elle reçoit un objet resp. Les données sont extraites de resp via resp.jokes, puis affectées à l'état articles à l'aide de setArticles ;
  • Lignes 12-14 : Si une erreur survient lors de la requête API (dans le bloc catch), elle est affichée dans la console avec 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, 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 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 : Utilisation concrète du hook useEffect ;
  • Ligne 7 : cette logique s’exécutera 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. On indique à 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.