Effects Lifecycle

Effets lifecycle : un aperçu complet

Les effets lifecycle, ou effets réactifs, constituent un aspect essentiel de la gestion des interactions entre vos composants React et des systèmes ou événements extérieurs. Ils permettent de synchroniser un composant avec des données, d'établir des abonnements ou encore de gérer des tâches spécifiques au cycle de vie du composant. Bien que leur utilisation soit souvent simplifiée, comprendre leurs mécanismes est essentiel pour produire un code fiable et performant.

Comprendre le cycle de vie des effets

Un composant React suit un cycle de vie composé de trois étapes principales : le montage, la mise à jour et le démontage. Cependant, le cycle de vie des effets diffère. Chaque effet est conçu pour démarrer une synchronisation, comme se connecter à une source de données, et, si nécessaire, arrêter cette synchronisation, par exemple se déconnecter. Ces cycles peuvent se produire plusieurs fois pour un même composant.

import { useEffect } from 'react';

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection('https://localhost:1234', roomId);
    connection.connect();

    return () => {
      connection.disconnect();
    };
  }, [roomId]);

  return <h1>Bienvenue dans le salon {roomId} !</h1>;
}

Dans cet exemple, lors du montage, l'effet établit une connexion au salon de discussion spécifié. Si roomId change, la fonction de nettoyage est appelée pour déconnecter l'ancien salon avant de connecter le nouveau. Lors du démontage, la déconnexion finale est effectuée.