Accueil/Notions/UseEffect

UseEffect

useEffect est un Hooks (React) fourni par la bibliothèque React, très utilisé pour gérer les Effets de bord dans les composants fonctionnels (React). Les effets de bord, en programmation, sont des opérations qui impactent des éléments hors du flux d'exécution normal, comme des requêtes de données, des modifications du DOM, ou des inscriptions à des services externes.

Le hook useEffect est extrêmement utile car il te permet d'encapsuler des comportements qui ne devraient pas se mêler directement au rendu d'un composant. Voici une explication étape par étape de son utilisation:

  1. Syntaxe de Base :

    useEffect(() => {
  // Ton code pour l'effet de bord ici
});

    Ce code s'exécute après chaque rendu du composant (équivalent à componentDidMount et componentDidUpdate dans les composants de classe).

  2. Contrôle des Exécutions : Pour contrôler quand l'effet s'exécute, tu peux passer un tableau de dépendances en second argument à useEffect :

    useEffect(() => {
  // Cela s'exécutera seulement si `variable` change
}, [variable]);

    Si tu passes un tableau vide ([]), l'effet ne s'exécutera qu'une seule fois après le premier rendu, similaire à componentDidMount.

  3. Nettoyage : Si ton effet de bord crée des abonnements ou nécessite un nettoyage (comme retirer des écouteurs d'événements), tu peux retourner une fonction de nettoyage :

    useEffect(() => {
  // Configuration de quelque chose
  return () => {
    // Nettoyage
  };
}, [variable]);

    La fonction de nettoyage s'exécutera avant que l'effet ne soit de nouveau appelé et également quand le composant va se démonter, ce qui est parfait pour éviter les fuites de mémoire.

Exemple Concret

Imaginons un composant qui écoute la taille de la fenêtre pour ajuster une variable d'état windowWidth.

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

const MyComponent: React.FC = () => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    // Fonction de nettoyage
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Tableau vide signifie que cet effet ne s'exécute qu'au montage

  return <div>Largeur de la fenêtre : {windowWidth}px</div>;
};

Dans cet exemple, useEffect s'assure que le gestionnaire handleResize est correctement ajouté et retiré, ce qui préserve les ressources et garantit une performance optimale.

En résumé, useEffect offre une méthode puissante et flexible pour gérer les effets de bord dans les composants fonctionnels React, permettant de maintenir une séparation claire entre la logique de vue (le rendu) et la logique d'effets de bord.

Pour approfondir tes connaissances en React et en programmation web en général, voici une liste de notions et de concepts que tu pourrais explorer :

  1. Hooks avancés de React :

    • useReducer : pour gérer des états plus complexes avec une logique réduite similaire à Redux.
    • useCallback : pour mémoriser des fonctions et éviter des rendus inutiles.
    • useMemo : pour mémoriser des valeurs calculées et optimiser les Performances.
    • useRef : pour accéder directement à un élément DOM ou stocker une valeur mutable qui ne provoque pas de nouveau rendu lorsqu'elle est mise à jour.
    • useContext : pour accéder à des données partagées dans un contexte, évitant ainsi le props drilling.

  2. Context API :

    • Comprendre comment utiliser les Contexts API (React) pour gérer l'état global dans une application React.

  3. Gestion d'état :

    • Redux : une bibliothèque populaire pour gérer l'état global de l'application de manière prévisible.
    • MobX : une alternative à Redux qui utilise des observables pour gérer l'état de l'application.
    • Recoil : une bibliothèque de gestion d'état de Facebook qui apporte une approche plus moderne avec React.

  4. Routing dans React :

    • React Router : pour gérer la navigation entre différentes pages dans une application monopage (Single Page Application).

  5. Optimisation des performances :

    • Code Splitting : pour diviser le code en plusieurs bundles qui peuvent être chargés dynamiquement, améliorant ainsi les temps de chargement.
    • Lazy Loading : pour charger des composants ou des données uniquement lorsque c'est nécessaire.
    • Memoization : techniques pour stocker des résultats de fonctions coûteuses.

  6. Tests :

    • Jest : pour écrire des tests unitaires et des tests d'intégration.
    • react-testing-library : pour écrire des tests qui se concentrent sur le comportement des composants.

  7. Développement dirigé par les composants :

    • Storybook : un outil qui permet de développer des composants de manière isolée et de visualiser toutes les variantes de ces composants.

  8. Server-Side Rendering et Static Site Generation (SSG) :

    • Next.js : un framework pour React qui supporte le SSR et le SSG, pour améliorer la performance et le SEO.
    • Gatsby : un générateur de sites statiques qui utilise React pour construire des sites très performants.

Chacun de ces concepts et outils peut t'ouvrir des portes vers des pratiques plus avancées et te permettre de construire des applications React plus robustes, performantes et maintenables.