useEffect : les effets de bord, et quand s'en passer

useEffect est le hook qui exécute du code après l'affichage d'un composant, pour le synchroniser avec un système extérieur à React : le titre de l'onglet, un minuteur, un abonnement à un événement du navigateur, une connexion. Il prend une fonction et un tableau de dépendances qui dit quand la relancer. Ce chapitre explique son fonctionnement, le nettoyage, le double appel du mode strict, et surtout les nombreux cas où il ne faut pas l'utiliser.

C'est quoi un effet de bord ?

Le rendu d'un composant doit être pur (chapitre 2) : il calcule du JSX, rien d'autre. Un effet de bord, c'est tout ce qui agit sur le monde extérieur : modifier document.title, démarrer un setInterval, écouter la touche Échap sur toute la page, ouvrir une connexion WebSocket, écrire dans localStorage, envoyer une requête réseau.

Ces actions ont deux places possibles :

1. Dans un gestionnaire d'événement, quand elles sont la conséquence d'une action de l'utilisateur : il clique sur « Supprimer », on envoie la requête de suppression. C'est le cas le plus fréquent.
2. Dans un effet, quand elles doivent avoir lieu parce que le composant est affiché : tant que la page « Mes fiches » est à l'écran, le titre de l'onglet doit être « Mes fiches ».

La syntaxe de useEffect

import { useEffect } from 'react';

export function PageFiches() {
  useEffect(() => {
    document.title = 'Mes fiches de frais | AppliFrais';
  }, []);

  return <h1>Mes fiches de frais</h1>;
}

• Le premier argument est la fonction d'effet. React l'exécute après avoir affiché le composant à l'écran, jamais pendant le rendu.
• Le second argument est le tableau de dépendances : la liste des valeurs utilisées par l'effet qui viennent du composant (props, état, valeurs calculées).

Quand l'effet utilise une prop, elle doit figurer dans les dépendances :

export function PageFiche({ mois }: { mois: string }) {
  useEffect(() => {
    document.title = `Fiche de frais – ${mois} | AppliFrais`;
  }, [mois]);   // si le mois affiché change, le titre suit
  …
}

Le nettoyage

Un effet qui démarre quelque chose doit pouvoir l'arrêter. La fonction d'effet peut renvoyer une fonction de nettoyage, que React appelle :

• avant de relancer l'effet (parce qu'une dépendance a changé) ;
• quand le composant disparaît de l'écran (le démontage).

import { useEffect, useState } from 'react';

// Affiche l'heure, mise à jour chaque seconde
export function Horloge() {
  const [heure, setHeure] = useState(() => new Date().toLocaleTimeString('fr-FR'));

  useEffect(() => {
    const minuteur = setInterval(() => {
      setHeure(new Date().toLocaleTimeString('fr-FR'));
    }, 1000);
    return () => clearInterval(minuteur);   // nettoyage : on arrête le minuteur
  }, []);

  return <p>Il est {heure}.</p>;
}

Sans le clearInterval, chaque affichage de l'horloge laisserait un minuteur tourner pour toujours, même après avoir quitté la page : une fuite de mémoire. (La valeur initiale () => new Date()… est une fonction : React ne l'appelle qu'au premier rendu.)

Même schéma pour un écouteur d'événement global, par exemple fermer un panneau avec la touche Échap :

useEffect(() => {
  function surTouche(e: KeyboardEvent) {
    if (e.key === 'Escape') onFermer();
  }
  window.addEventListener('keydown', surTouche);
  return () => window.removeEventListener('keydown', surTouche);
}, [onFermer]);

StrictMode et le double appel

En développement, StrictMode (posé dans main.tsx) monte, démonte puis remonte chaque composant au premier affichage. Tes effets s'exécutent donc deux fois de suite : effet, nettoyage, effet. Ce n'est pas un bogue de React : c'est un test volontaire. Si ton effet est correct, avec un nettoyage symétrique, ce double appel ne change rien à ce que voit l'utilisateur. S'il révèle un problème (deux minuteurs, deux abonnements, un compteur qui double), c'est que le nettoyage manque.

Tu n'as peut-être pas besoin d'un effet

La documentation de React consacre une page entière à ce sujet, You Might Not Need an Effect. Un effet sert à se synchroniser avec un système extérieur. Pour tout ce qui reste dans React (calculer une valeur, réagir à un clic), un effet est inutile, plus lent (un rendu de plus) et source de bogues. Les quatre erreurs les plus courantes :

1. Calculer une valeur à partir de l'état ou des props.

// INUTILE : un état et un effet pour une valeur calculable
const [total, setTotal] = useState(0);
useEffect(() => {
  setTotal(frais.reduce((s, f) => s + f.montant, 0));
}, [frais]);

// JUSTE : un calcul pendant le rendu
const total = frais.reduce((s, f) => s + f.montant, 0);

La version avec effet affiche d'abord un total faux (l'ancien), puis refait un rendu avec le bon. La version calculée est juste du premier coup.

2. Réagir à une action de l'utilisateur.

// INUTILE : un état « drapeau » et un effet qui le surveille
const [aEnvoyer, setAEnvoyer] = useState(false);
useEffect(() => {
  if (aEnvoyer) {
    envoyerFiche();
    setAEnvoyer(false);
  }
}, [aEnvoyer]);
<button onClick={() => setAEnvoyer(true)}>Clôturer</button>

// JUSTE : l'action se fait dans le gestionnaire
<button onClick={() => envoyerFiche()}>Clôturer</button>

Le clic est la cause de l'envoi : le code va là où le clic est traité.

3. Réinitialiser un état quand une prop change. Pour remettre à zéro le formulaire quand on passe d'une fiche à une autre, inutile de surveiller l'identifiant dans un effet : donne au composant une clé qui dépend de la fiche. Une nouvelle clé crée un nouveau composant, avec un état neuf.

<FormulaireFrais key={fiche.id} ficheId={fiche.id} />

4. Copier une prop dans l'état. const [mois, setMois] = useState(props.mois) ne suit pas les changements de props.mois (la valeur initiale ne sert qu'au premier rendu). Utilise directement props.mois.

La boucle infinie

const [fiches, setFiches] = useState<FicheResume[]>([]);

useEffect(() => {
  getFiches().then((donnees) => setFiches(donnees));
});   // pas de tableau de dépendances

L'effet s'exécute après chaque rendu ; il change l'état ; le changement provoque un rendu ; qui relance l'effet… L'onglet Réseau montre des centaines de requêtes par seconde. Même boucle avec une dépendance qui change à chaque rendu, comme un objet créé dans le composant :

const filtre = { etat: 'CR' };                 // un NOUVEL objet à chaque rendu
useEffect(() => { … setFiches(…) }, [filtre]); // toujours « différent » : relancé à chaque rendu

React compare les dépendances avec Object.is : deux objets créés séparément sont toujours différents, même avec le même contenu. Mets dans les dépendances des valeurs primitives (filtre.etat, une chaîne) ou crée l'objet dans l'effet.

useRef : garder une valeur sans redessiner, ou viser un élément

useRef crée une « boîte » { current: … } que React conserve entre les rendus. Contrairement à l'état, modifier ref.current ne provoque pas de rendu. Deux usages :

Accéder à un élément du DOM, par exemple pour lui donner le focus :

import { useEffect, useRef } from 'react';

export function ChampRecherche() {
  const champ = useRef<HTMLInputElement>(null);

  useEffect(() => {
    champ.current?.focus();   // le focus dans le champ dès l'affichage
  }, []);

  return (
    <>
      <label htmlFor="recherche">Rechercher un frais</label>
      <input id="recherche" ref={champ} type="search" />
    </>
  );
}

Après l'affichage, champ.current contient l'élément <input> réel. Le ?. évite une erreur s'il vaut encore null. Donner le focus est un des rares cas légitimes d'accès direct au DOM.

Mémoriser une valeur qui ne s'affiche pas, comme l'identifiant d'un minuteur qu'on veut pouvoir arrêter depuis un gestionnaire.

useEffectEvent : lire une valeur récente sans relancer l'effet

React 19.2 a ajouté useEffectEvent. Il sert quand un effet doit lire une valeur à jour sans dépendre d'elle. Exemple : un minuteur qui enregistre le brouillon toutes les 30 secondes doit envoyer la dernière saisie, mais le minuteur ne doit pas redémarrer à chaque frappe.

import { useEffect, useEffectEvent } from 'react';

function SauvegardeAuto({ brouillon }: { brouillon: string }) {
  const enregistrer = useEffectEvent(() => {
    localStorage.setItem('brouillon-frais', brouillon);   // lit toujours la dernière valeur
  });

  useEffect(() => {
    const minuteur = setInterval(() => enregistrer(), 30_000);
    return () => clearInterval(minuteur);
  }, []);   // le minuteur ne redémarre pas à chaque frappe

  return null;
}

Une fonction créée par useEffectEvent ne se met pas dans les dépendances et ne s'appelle que depuis un effet. C'est un outil de cas particulier : la plupart de tes effets n'en ont pas besoin.

Exercices

function CompteARebours({ limite }: { limite: Date }) {
  const [reste, setReste] = useState(0);
  useEffect(() => {
    setInterval(() => {
      setReste(Math.round((limite.getTime() - Date.now()) / 1000));
    }, 1000);
  });
  return <p>Encore {reste} secondes</p>;
}

function CompteARebours({ limite }: { limite: Date }) {
  const calculer = () => Math.max(0, Math.round((limite.getTime() - Date.now()) / 1000));
  const [reste, setReste] = useState(calculer);

  useEffect(() => {
    const minuteur = setInterval(() => {
      setReste(Math.max(0, Math.round((limite.getTime() - Date.now()) / 1000)));
    }, 1000);
    return () => clearInterval(minuteur);
  }, [limite]);

  return <p>Encore {reste} secondes</p>;
}

function Recap({ frais }: { frais: Frais[] }) {
  const [nb, setNb] = useState(0);
  const [plusGros, setPlusGros] = useState<Frais | null>(null);
  useEffect(() => {
    setNb(frais.length);
    setPlusGros(frais.length > 0 ? frais.reduce((a, b) => (b.montant > a.montant ? b : a)) : null);
  }, [frais]);
  return <p>{nb} frais{plusGros && `, le plus gros : ${plusGros.libelle}`}</p>;
}

function Recap({ frais }: { frais: Frais[] }) {
  const plusGros = frais.length > 0 ? frais.reduce((a, b) => (b.montant > a.montant ? b : a)) : null;
  return <p>{frais.length} frais{plusGros && `, le plus gros : ${plusGros.libelle}`}</p>;
}