Gestion du cycle de vie des composants avec le Hook useEffect dans React

Le hook useEffect est une fonctionnalité intégrée dans la bibliothèque JavaScript React qui permet de gérer le cycle de vie d'un composant de manière plus simple et plus efficace. Comme indiqué dans le quiz, la bonne réponse à la question "Dans React, à quoi sert le hook 'useEffect' ?" est "Gère le cycle de vie du composant".

Dans le passé, pour interagir avec le cycle de vie d'un composant dans React, il fallait utiliser des méthodes de cycle de vie de classe spéciales comme componentDidMount, componentDidUpdate, et componentWillUnmount. Cependant, avec l'introduction des Hooks en React 16.8, il est devenu possible d'utiliser des caractéristiques de l'État et du cycle de vie à partir de fonctions composant.

Le hook useEffect combine la fonctionnalité de ces trois méthodes de cycle de vie en une seule API. Cela permet d'exécuter des effets de bord (c'est-à-dire des tâches qui ont des effets durables) après chaque rendu, y compris le premier rendu. Le code ci-dessous est un exemple simplifié d'utilisation de useEffect pour exécuter un effet de bord après chaque rendu :

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

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

  // Similaire à componentDidMount et componentDidUpdate :
  useEffect(() => {
    // Mettre à jour le titre du document en utilisant l'API du navigateur
    document.title = `Vous avez cliqué ${count} fois`;
  });

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>
        Cliquez moi
      </button>
    </div>
  );
}

Dans cet exemple, le titre du document est mis à jour à chaque fois que l'utilisateur clique sur le bouton. Le hook useEffect assure que cet effet de bord est toujours exécuté après que React a mis à jour le DOM.

Il est important de noter que useEffect est également capable de gérer le nettoyage en retournant une fonction de nettoyage. Cela est équivalent à componentWillUnmount dans les classes, permettant de nettoyer les effets indésirables avant que le composant ne soit démonté du DOM.

En bref, le hook useEffect offre une méthode plus flexible et plus facile à comprendre pour gérer le cycle de vie des composants dans React. Il simplifie également la logique complexe associée aux effets de bord en la plaçant à un endroit centralisé, ce qui facilite le suivi du cycle de vie du composant.