Introduction

React est une bibliothèque JavaScript puissante utilisée pour construire des interfaces utilisateur, en particulier des applications à page unique (SPA). L'une de ses fonctionnalités principales est le concept d'état et de méthodes de cycle de vie, désormais gérés par l'utilisation des Hooks. Parmi ces hooks, useEffect a gagné en popularité grâce à sa capacité à effectuer des effets secondaires dans les composants fonctionnels. Cet article vise à démystifier ce qu'est useEffect, comment l'utiliser, et à partager quelques bonnes pratiques lors de l'utilisation de useEffect.

Qu'est-ce que useEffect ?

Le hook useEffect est une fonctionnalité intégrée fournie par React pour effectuer des effets secondaires dans les composants fonctionnels. Les effets secondaires peuvent inclure la récupération de données, les abonnements ou la modification manuelle du DOM. Il accepte deux arguments :

useEffect(didUpdate);

ou

useEffect(() => {
  // votre code ici
}, [dependencies]);

Ici, didUpdate est une fonction qui exécute l'effet secondaire et retourne éventuellement une fonction de nettoyage. Le tableau de dépendances (second argument) spécifie quand l'effet doit être exécuté. Si vous passez un tableau vide ([]), cela signifie que l'effet ne s'exécutera qu'une seule fois, au montage et au démontage.

Utilisations et implémentations

Voyons quelques exemples pratiques :

// Récupération de données depuis une API
useEffect(() => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []); // Un tableau de dépendances vide signifie que cet effet ne s'exécutera qu'une fois au montage

// S'abonner à un événement ou une API
useEffect(() => {
  const eventHandler = () => console.log('Événement déclenché');
  document.addEventListener("click", eventHandler);
  
  // Fonction de nettoyage : supprimer le gestionnaire d'événements lorsque le composant est démonté
  return () => document.removeEventListener("click", eventHandler);
}, []); // Un tableau de dépendances vide signifie que cet effet ne s'exécutera qu'une fois au montage

Bonnes pratiques

Voici quelques conseils lors de l'utilisation de useEffect :

1. Éviter les fuites de mémoire : Si vous vous abonnez à un service externe ou configurez un minuteur, il est important de nettoyer après vous en supprimant le gestionnaire d'événements ou en annulant l'intervalle lorsque votre composant est démonté, afin de ne pas provoquer de fuites de mémoire dans votre application. C'est ce que fait la fonction de retour de useEffect pour nous.
2. Exécution conditionnelle des effets : Si des dépendances sont fournies à useEffect, il ne s'exécutera qu'après le rendu initial et lors de toute mise à jour où ces valeurs changent. C'est une façon de contrôler quand les effets secondaires se produisent en fonction des changements de props ou d'état.
3. Utilisation de la fonction de nettoyage : Chaque fois que votre composant est rendu, React exécute votre fonction d'effet (y compris useEffect). C'est pourquoi vous voyez souvent des fonctions de nettoyage dans useEffect — elles permettent la gestion des ressources et préviennent les fuites de mémoire en nettoyant après nous-mêmes.
4. Éviter les effets au montage : Si vous souhaitez exécuter un effet uniquement lors des mises à jour, et non lors du montage initial, vous pouvez passer un tableau de dépendances avec une ou plusieurs valeurs comme second argument de useEffect.
5. useEffect imbriqué et nettoyage : Vous pouvez avoir plusieurs effets dans votre composant. Chacun d'eux s'exécutera séquentiellement, avec le nettoyage de l'effet précédent avant son exécution.
6. Séparer les effets : Si vous avez un effet large qui fait plusieurs choses, ou si ces choses peuvent être séparées pour des gains de performance, envisagez de les séparer en leurs propres hooks useEffect.

Conclusion

Le hook useEffect est une partie essentielle de l'écosystème React car il permet les effets secondaires dans les composants fonctionnels. Comprendre son utilisation et ses bonnes pratiques vous permettra de gérer efficacement des scénarios plus complexes avec React. Bon codage Reacteurs !!