Le hook useEffect est un élément fondamental de React, vous permettant d'effectuer des effets secondaires dans les composants fonctionnels. Voici une répartition détaillée :

Qu’est-ce que useEffect ?

• Le hook useEffect vous permet d'effectuer des effets secondaires dans vos composants, tels que la récupération de données, les abonnements ou la modification manuelle du DOM.
• Il peut être considéré comme une combinaison des méthodes de cycle de vie ComponentDidMount, ComponentDidUpdate et ComponentWillUnmount.

Syntaxe

useEffect(() => {
  // Your side effect code here

  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

Paramètres

1. Fonction d'effet : le premier argument est une fonction qui contient le code de l'effet secondaire. Cette fonction s'exécutera une fois le rendu validé à l'écran.

2. Fonction de nettoyage (facultatif) : la fonction d'effet peut renvoyer une fonction de nettoyage que React appellera lorsque le composant sera démonté ou avant que l'effet ne soit réexécuté. Ceci est utile pour nettoyer les abonnements ou les minuteries.

3. Tableau de dépendances : le deuxième argument est un tableau de dépendances. L'effet s'exécute uniquement lorsque l'une des dépendances change. Si vous transmettez un tableau vide ([]), l'effet ne s'exécute qu'une seule fois après le rendu initial (comme composantDidMount).

Exemples d'utilisation

1. Exemple de base : récupération des données lors du montage

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

const DataFetchingComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []); // Runs only once after the initial render

  return 
{data ? JSON.stringify(data) : 'Loading...'}
;
};

1. Exemple de nettoyage : abonnement à un événement

import React, { useEffect } from 'react';

const EventListenerComponent = () => {
  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized:', window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    // Cleanup function to remove the event listener
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Runs only once after the initial render

  return 
Resize the window and check the console.
;
};

1. Exemple de dépendance : exécution d'un effet basé sur un changement d'accessoire

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

const TimerComponent = ({ delay }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount   1);
    }, delay);

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, [delay]); // Runs every time `delay` changes

  return 
Count: {count}
;
};

Meilleures pratiques

• Spécifier les dépendances : incluez toujours les variables dont dépend votre effet dans le tableau des dépendances pour éviter les fermetures obsolètes.
• Évitez les effets secondaires lors du rendu : évitez les effets secondaires lors de la phase de rendu ; utilisez plutôt useEffect.
• Utiliser les fonctions de nettoyage : si votre effet crée des abonnements ou des minuteries, renvoyez toujours une fonction de nettoyage pour éviter les fuites de mémoire.

Conclusion

Le hook useEffect est un outil puissant pour gérer les effets secondaires dans les composants fonctionnels, ce qui le rend essentiel pour le développement React moderne. En comprenant sa syntaxe et ses bonnes pratiques, vous pouvez gérer efficacement le comportement des composants et leurs effets secondaires.