Utilisation de `useEffect` pour exécuter du code après le rendu

Le besoin d'agir après la mise à jour du DOM

Comme nous l'avons vu, les composants React ont pour rôle principal de décrire l'interface utilisateur. Cependant, de nombreuses tâches (les effets de bord) doivent se produire en dehors de ce flux de rendu principal, souvent après que React ait effectivement mis à jour le DOM. Par exemple, si vous voulez manipuler directement un élément du DOM (comme mettre le focus sur un input) ou effectuer une action basée sur l'UI fraîchement rendue, vous devez attendre que le rendu soit terminé.

Exécuter ces opérations directement pendant le rendu serait problématique : le DOM n'est peut-être pas encore à jour, et des opérations longues pourraient bloquer le thread principal et rendre l'interface non réactive. React propose donc le hook `useEffect` spécifiquement pour planifier l'exécution de ces fonctions d'effet après la phase de rendu et de mise à jour du DOM.

Syntaxe de base et exécution par défaut

Le hook `useEffect` prend en premier argument une fonction. Cette fonction contient le code de l'effet que vous souhaitez exécuter. Par défaut, si vous ne fournissez pas de second argument (le tableau de dépendances, que nous verrons ensuite), la fonction d'effet sera exécutée après chaque rendu du composant.

Voici la syntaxe la plus simple :

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

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

  // L'effet à exécuter après chaque rendu
  useEffect(() => {
    // Ce code s'exécute après le rendu initial ET après chaque mise à jour
    console.log(`Le composant a été rendu. Compteur : ${count}`);
    document.title = `Compteur : ${count}`; // Exemple: Mise à jour du titre de la page
  }); // Pas de second argument !

  console.log('Phase de rendu...'); // S'exécute avant l'effet

  return (
    

      
Compteur : {count}
       setCount(prevCount => prevCount + 1)}>
        Incrémenter
      
    
  );
}

export default MonComposantAvecEffet;

Dans cet exemple :

• Au premier chargement, la console affichera d'abord "Phase de rendu..." puis "Le composant a été rendu. Compteur : 0". Le titre de la page deviendra "Compteur : 0".
• A chaque clic sur le bouton "Incrémenter", le composant est re-rendu. La console affichera "Phase de rendu..." puis "Le composant a été rendu. Compteur : N" (où N est la nouvelle valeur). Le titre de la page sera également mis à jour.

Cela démontre que, sans tableau de dépendances, l'effet s'exécute après le rendu initial et après chaque mise à jour ultérieure du composant.

Le timing : Après le rendu et la mise à jour du DOM

Il est important de comprendre que React garantit que la fonction passée à `useEffect` s'exécute après que le navigateur ait eu la chance de "peindre" les changements à l'écran (layout et paint). Cela signifie que lorsque votre code d'effet s'exécute, vous pouvez être sûr que le DOM reflète bien le dernier état rendu par votre composant.

Ce comportement par défaut (exécution après chaque rendu) correspond à la combinaison des anciennes méthodes de cycle de vie `componentDidMount` (pour le premier rendu) et `componentDidUpdate` (pour les mises à jour suivantes) des composants de classe. Cependant, comme nous allons le voir, exécuter un effet *à chaque* rendu est souvent inefficace et parfois incorrect. La prochaine étape consiste à apprendre à contrôler cette exécution à l'aide du tableau de dépendances.