Bonne utilisation des Effects

Avoir une bonne utilisation des effets

Les effets (useEffect) sont un outil puissant de React permettant de synchroniser les composants avec des systèmes externes tels que le DOM, des API ou des widgets tiers. Cependant, ils ne doivent être utilisés que lorsque cela est absolument nécessaire. Une utilisation excessive ou superflue peut rendre le code moins performant, plus complexe et susceptible d’introduire des bugs.

Quand utiliser un effet ?

Les effets sont utiles dans les cas suivants :
1. Interaction avec des systèmes extérieurs : Par exemple, gérer une API ou synchroniser un composant React avec un widget tiers.
2. Mise à jour ou abonnement au DOM : Manipuler directement un élément DOM ou écouter des événements globaux (par exemple, window.addEventListener).
3. Effets de bord liés à l’affichage : Par exemple, démarrer une animation, connecter un websocket ou charger des données lorsque le composant s’affiche.

Exemple : Supposons un composant ChatRoom qui se connecte à un serveur lorsque l’utilisateur accède à la discussion :

import { useEffect } from 'react';

function ChatRoom() {
  useEffect(() => {
    const connection = createConnection();
    connection.connect();

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

  return <h1>Bienvenue dans la discussion !</h1>;
}

L’effet démarre une connexion au serveur lors du montage du composant et s'assure de la fermer proprement lors de son démontage. Cela évite d'accumuler des connexions inutilisées et garantit une bonne gestion des ressources.