Quelles méthodes du cycle de vie existent dans React et comment les émuler avec useEffect?

Dans un composant de classe React, il existe plusieurs méthodes du cycle de vie, dont:

• componentDidMount — appelé après le montage du composant;
• componentDidUpdate — appelé après la mise à jour du composant;
• componentWillUnmount — appelé avant le démontage du composant.

Dans les composants fonctionnels avec le hook useEffect, ces méthodes peuvent être émularisées comme suit:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // code qui s'exécute une fois après le montage
    console.log('Mounted');
  }, []); // tableau de dépendances vide

  // componentDidUpdate
  useEffect(() => {
    // code qui s'exécute lors du changement de props ou d'état
    console.log('Updated');
  }); // sans second argument — appelé après chaque rendu

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // code de nettoyage avant le démontage
      console.log('Unmounted');
    };
  }, []);

  return <div>{props.value}</div>;
}

Ainsi, useEffect avec un tableau de dépendances vide émule componentDidMount et componentWillUnmount (via la fonction de nettoyage), et useEffect sans second argument — componentDidUpdate.