Qu'est-ce que useEffect ?

Le hook useEffect est utilisé pour gérer les effets secondaires au sein des composants React. Il remplcae les fonctions de cycle de vie des composants de classe.

useEffect(() => {
    // Logique d'effet secondaire
    return () => {
        // Fonction de nettoyage
    };
}, [tableauDeDependances]);

Capacités du hook useEffect

• Phase de montage : Lors de l'exécution du composant, les effets secondaires sont collectés dans une file d'attente. Après le montage complet du composant, ces effets sont exécutés et leurs fonctions de nettoyage sont stockées séparément.
• Phase de mise à jour : Lors des mises à jour, les effets secondaires sont à nouveau collectés. Avant leur exécution, le hook vérifie si les dépendances spécifiées ont changé. Si oui, l'effet s'exécute et une nouvelle fonction de nettoyage est obtenue ; sinon, il est ignoré.
• Phase de démontage : Lorsque le composant est sur le point d'être démonté, toutes les fonctions de nettoyage enregistrées sont appelées.

Cas courants de gestion des effets secondaires

Le comportement d'useEffect varie en fonctino du tableau de dépendances :

• Sans tableau : L'effet s'exécute après chaque rendu et mise à jour du composant.
• Avec un tableau vide : L'effet ne s'exécute qu'une seule fois, après le montage initial.
• Avec des dépendances spécifiques : L'effet s'exécute uniquement lorsque l'une des dépendances listées change.

Exemple 1 : Exécuter une action après le montage

useEffect(() => {
    console.log("Action après le montage initial");
    return () => {};
}, []);

Exemple 2 : Exécuter une action après le montage et les mises à jour

useEffect(() => {
    console.log("Action après le montage et chaque mise à jour");
});

Exemple 3 : Simuler componentDidUpdate avec des dépendances

const aDejaMonte = useRef(false);
useEffect(() => {
    if (aDejaMonte.current) {
        console.log("Action lors des mises à jour");
    } else {
        aDejaMonte.current = true;
    }
});

Exemple 4 : Exécuter une action avant le démontage

useEffect(() => {
    return () => {
        console.log("Action avant le démontage du composant");
    };
}, []);

Simulation des méthodes de cycle de vie de classe

Le hook useEffect peut imiter plusieurs méthodes de cycle de vie :

• Pour componentDidMount, utiliser un tableau de dépendances vide.
• Pour componentDidUpdate, spécifier les dépendances à surveiller dans le tableau.
• Pour componentWillUnmount, retourner une fonction de nettoyage avec un tableau vide.