useEffect : Gérez les effets de bord dans vos composants React

C'est quoi un effet de bord ?

En programmation, un effet de bord se produit lorsqu'une fonction interagit avec un élément en dehors de sa portée, comme une base de données ou le DOM. Dans React, useEffect permet de gérer ces interactions tout en respectant le cycle de vie des composants fonctionnels.

Qu'est-ce que useEffect ?

useEffect est un hook fourni par React qui permet d'exécuter une fonction après le rendu d'un composant. Il prend deux paramètres :

• Une fonction de callback : Le code à exécuter (effet).
• Un tableau de dépendances : Une liste de variables qui déclenche l'effet lorsqu'elles changent.

Avec useEffect, vous pouvez gérer différentes étapes du cycle de vie comme le montage, la mise à jour ou le démontage d'un composant.

Comment utiliser useEffect ?

Voici un exemple simple où useEffect est utilisé pour récupérer des données depuis une API :

import React, { useEffect, useState } from 'react';
    
function UserData() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('https://api.example.com/users/1')
            .then(response => response.json())
            .then(userData => setData(userData))
            .catch(console.error);
    }, []); // Tableau de dépendances vide : l'effet se déclenche uniquement au montage.

    return (
        <div>
            <p>Nom : {data?.name}</p>
        </div>
    );
}

export default UserData;

Dans cet exemple :

• L'effet (fetch des données) est exécuté après le rendu initial du composant.
• Le tableau de dépendances vide ([]) indique que l'effet ne sera exécuté qu'une fois (au montage).

Pourquoi utiliser useEffect ?

Voici les principaux avantages de useEffect :

• Centralisation des effets : Il regroupe toute la logique des effets dans un seul endroit.
• Compatibilité avec les hooks : Peut être combiné avec d'autres hooks comme useState.
• Gestion automatique du démontage : Idéal pour nettoyer les abonnements ou les minuteries.

Erreurs courantes avec useEffect

• Oublier les dépendances : Si vous ne mettez pas à jour correctement le tableau de dépendances, vos effets peuvent être exécutés de manière inattendue ou pas du tout.
• Appels répétés : Ajouter des dépendances inutiles peut entraîner des re-rendus inutiles.
• Nettoyage incorrect : Si un effet nécessite un nettoyage (par exemple, un abonnement), utilisez un retour dans useEffect :
  
  

  useEffect(() => {
      const subscription = someService.subscribe();
      return () => subscription.unsubscribe(); // Nettoyage
  }, []);

FAQ : Questions fréquentes sur useEffect

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

function Timer() {
    const [seconds, setSeconds] = useState(0); // Gérer l'état du compteur

    useEffect(() => {
        const interval = setInterval(() => {
            setSeconds(prev => prev + 1); // Mettre à jour l'état chaque seconde
        }, 1000);

        return () => clearInterval(interval); // Nettoyer le timer lors du démontage
    }, []); // L'effet ne s'exécute qu'une fois, au montage

    return (
        <div>
            <p>Temps écoulé : {seconds} secondes</p>
        </div>
    );
}