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é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, le hook useEffect est utilisé pour s'assurer que l'état articles est 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 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 allons l'utiliser ;
  • 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), elle reçoit un objet resp. Les données sont extraites de resp via resp.jokes, puis affectées à l'état articles avec 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.

Exemple 2 :

Création du composant Counter pour suivre la valeur d'un counter. L'objectif est d'afficher 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 pour bénéficier de leurs fonctionnalités ;
• Ligne 3 : La syntaxe fonctionnelle conventionnelle définit 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, il s'agit de 0 ;
• Lignes 6-8 : Cas d'utilisation réel 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 s'exécuter.
• Lignes 14-19 : Rendu du balisage du composant.

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.