Si vous avez du mal à comprendre le hook useEffect, vous n’êtes pas seul.

Les débutants comme les développeurs expérimentés considèrent qu’il s’agit de l’un des hooks les plus difficiles à comprendre, car il nécessite la compréhension de quelques concepts de programmation peu familiers.

Dans ce guide rapide, nous allons voir pourquoi ce hook existe, comment mieux le comprendre et comment l’utiliser correctement dans vos projets React dès aujourd’hui.

Vous voulez le meilleur moyen d’apprendre React ? Devenez un pro de React en 30 minutes par jour avec le React Bootcamp

.

Pourquoi s’appelle-t-il useEffect ?

Lorsque les hooks React de base ont été ajoutés à la bibliothèque en 2018 (useState, useEffect, et ainsi de suite), de nombreux développeurs ont été déroutés par le nom de ce hook : « useEffect ».

Qu’est-ce qu’un  » effet  » exactement ?

Le mot effet fait référence à un terme de programmation fonctionnelle appelé « effet secondaire ».

Mais pour vraiment comprendre ce qu’est un effet secondaire, nous devons d’abord appréhender le concept de fonction pure.

Vous ne le savez peut-être pas, mais la plupart des composants React sont destinés à être des fonctions pures.

Il peut être étrange de penser aux composants React comme à des fonctions, mais ils le sont.

Il est utile de voir qu’un composant React normal est déclaré comme une fonction JavaScript :

function MyReactComponent() {}

La plupart des composants React sont des fonctions pures, c’est-à-dire qu’ils reçoivent une entrée et produisent une sortie prévisible de JSX.

L’entrée d’une fonction JavaScript est constituée d’arguments. Mais quelle est l’entrée d’un composant React ? Les accessoires!

Ici, nous avons un composant User sur lequel le nom de l’accessoire est déclaré. Dans User, la valeur de l’accessoire est affichée dans un élément d’en-tête.

export default function App() {
  retur  n    
}
  
function User(props) {
  return

{props.nom}

; // John Doe
}

Il s’agit d’une pureté car, avec la même entrée, elle renverra toujours la même sortie.

Si nous passons à User une proposition de nom avec la valeur « John Doe », notre résultat sera toujours John Doe.

Vous vous dites peut-être : « Qu’est-ce que ça peut faire ? Pourquoi avons-nous même un nom pour cela ? »

Les fonctions pures ont le grand avantage d’être prévisibles, fiables et faciles à tester

Ceci est à comparer avec le cas où nous avons besoin d’effectuer un effet secondaire dans notre composant.

Que sont les effets secondaires dans React ?

Les effets secondaires ne sont pas prévisibles car ce sont des actions qui sont effectuées avec le « monde extérieur »

Nous exécutons un effet secondaire lorsque nous avons besoin de sortir de nos composants React pour faire quelque chose. L’exécution d’un effet secondaire, cependant, ne nous donnera pas un résultat prévisible.

Imaginez que nous demandions des données (comme des articles de blog) à un serveur qui a échoué et qui, au lieu des données de l’article, nous donne une réponse avec un code d’état 500.

Pratiquement toutes les applications reposent sur les effets secondaires pour fonctionner d’une manière ou d’une autre, à l’exception des applications les plus simples.

Parmi les effets secondaires courants, citons :

• Effectuer une requête à une API pour obtenir des données d’un serveur dorsal
• Pour interagir avec les API du navigateur (c’est-à-dire pour utiliser directement le document ou la fenêtre )
• Utiliser des fonctions de temporisation imprévisibles comme setTimeout ou setInterval

C’est la raison pour laquelle useEffect existe : pour fournir un moyen de gérer l’exécution de ces effets secondaires dans ce qui est autrement des composants React purs.

Par exemple, si nous voulions modifier la métabalise title pour afficher le nom de l’utilisateur dans l’onglet de son navigateur, nous pourrions le faire dans le composant lui-même, mais nous ne devrions pas.

function User({nom }) {
  document.title = nom 
  // Il s'agit d'un effet secondaire. Ne faites pas cela dans le corps du composant !
    
  return

{nom}

}

Si nous exécutons un effet secondaire directement dans le corps de notre composant, il entrave le rendu de notre composant React.

Les effets secondaires doivent être séparés du processus de rendu. Si nous devons effectuer un effet secondaire, il doit être réalisé strictement après le rendu de notre composant.

C’est ce que nous offre useEffect.

En résumé, useEffect est un outil qui nous permet d’interagir avec le monde extérieur sans affecter le rendu ou les performances du composant dans lequel il se trouve

Comment utiliser useEffect ?

La syntaxe de base de useEffect est la suivante :

// 1. Importer useEffect
importez { useEffect } de 'react' ;

function MyComponent() {
  // 2. appelez-la au-dessus du JSX renvoyé  
  // 3. Passez-lui deux arguments : une fonction et un tableau
  useEffect(() => {}, []) ;
  
  // retourne...
}

La manière correcte d’exécuter l’effet secondaire dans notre composant User est la suivante :

1. Nous importons useEffect de « react »
2. Nous l’appelons au-dessus du JSX retourné dans notre composant
3. Nous lui passons deux arguments : une fonction et un tableau

import { useEffect } de 'react' ;

function User({nom }) {
  useEffect(() => {
    document.title = nom ;
  }, [nom]) ;
    
  return

{nom}

}

La fonction transmise à useEffect est une fonction de rappel. Elle sera appelée après le rendu du composant.

Dans cette fonction, nous pouvons exécuter nos effets secondaires ou plusieurs effets secondaires si nous le souhaitons.

Le deuxième argument est un tableau, appelé tableau des dépendances. Ce tableau doit inclure toutes les valeurs sur lesquelles repose notre effet secondaire.

Dans notre exemple ci-dessus, puisque nous changeons le titre en fonction d’une valeur dans la portée externe, le nom, nous devons l’inclure dans le tableau des dépendances.

Ce tableau va vérifier si une valeur (dans ce cas le nom) a changé entre les rendus. Si c’est le cas, il exécutera à nouveau notre fonction use effect.

Cela a du sens car si le nom change, nous voulons afficher ce nouveau nom et donc exécuter à nouveau notre effet secondaire.

Comment corriger les erreurs courantes avec useEffect ?

Il y a quelques détails subtils à connaître pour éviter les erreurs avec useEffect.

Si vous ne fournissez pas du tout le tableau de dépendances et que vous ne fournissez qu’une fonction à useEffect, celle-ci sera exécutée après chaque rendu.

Cela peut entraîner des problèmes lorsque vous tentez de mettre à jour l’état dans votre hook useEffect.

Si vous oubliez de fournir correctement vos dépendances et que vous définissez un élément d’état local lorsque l’état est mis à jour, le comportement par défaut de React est de rendre à nouveau le composant. Et donc, puisque useEffect s’exécute après chaque rendu sans le tableau de dépendances, nous aurons une boucle infinie.

function MyComponent() {
  const [data, setData] = useState([])  
    
  useEffect(() => {
    fetchData().then(myData => setData(myData))
    // Erreur ! useEffect s'exécute après chaque rendu sans le tableau de dépendances, ce qui provoque une boucle infinie
  }) 
}

Après le premier rendu, useEffect sera exécuté, l’état sera mis à jour, ce qui provoquera un nouveau rendu, qui provoquera une nouvelle exécution de useEffect, recommençant le processus à l’infini.

C’est ce qu’on appelle une boucle infinie et cela casse effectivement notre application.

Si vous mettez à jour l’état dans votre useEffect, assurez-vous de fournir un tableau de dépendances vide. Si vous fournissez un tableau vide, ce que je vous recommande de faire par défaut chaque fois que vous utilisez useEffect, la fonction d’effet ne sera exécutée qu’une seule fois après le premier rendu du composant.

Un exemple courant est la récupération de données. Pour un composant, vous pouvez vouloir récupérer des données une seule fois, les mettre dans un état, puis les afficher dans votre JSX.

function MyComponent() {
  const [data, setData] = useState([])  
    
  useEffect(() => {
    fetchData().then(myData => setData(myData))
    // Correct ! S'exécute une fois après le rendu avec un tableau vide
  }, []) 
   
  return

{data.map(item =>
• {item}

)}

}

Qu’est-ce que la fonction de nettoyage dans useEffect ?

La dernière partie de l’exécution correcte des effets secondaires dans React est la fonction de nettoyage de l’effet.

Parfois, nos effets secondaires doivent être désactivés. Par exemple, si vous avez un compte à rebours utilisant la fonction setInterval, cet intervalle ne s’arrêtera pas à moins que nous utilisions la fonction clearInterval.

Un autre exemple est l’utilisation des abonnements avec les WebSockets. Les abonnements doivent être « désactivés » lorsque nous ne les utilisons plus, et c’est à cela que sert la fonction cleanup.

Si nous définissons un état à l’aide de setInterval et que cet effet secondaire n’est pas nettoyé, lorsque notre composant se démonte et que nous ne l’utilisons plus, l’état est détruit avec le composant – mais la fonction setInterval continue de fonctionner.

function Timer() {
  const [time, setTime] = useState(0) ;
    
  useEffect(() => {
    setInterval(() => setTime(1), 1000) 
    // compte 1 par seconde
    // nous devons arrêter d'utiliser setInterval lorsque le composant se démonte
  }, []) ;
}

Le problème avec ceci si le composant est détruit, est que setInterval va essayer de mettre à jour une variable un morceau de temps d' état qui n’existe plus. Il s’agit d’une erreur appelée fuite de mémoire.

Pour utiliser la fonction de nettoyage, nous devons retourner une fonction à l’intérieur de la fonction useEffect.

Dans cette fonction, nous pouvons effectuer notre nettoyage, dans ce cas utiliser clearInterval et arrêter setInterval.

function Timer() {
  const [time, setTime] = useState(0) ;
    
  useEffect(() => {
    let interval = setInterval(() => setTime(1), 1000) 

    return () => {
      // setInterval effacé lorsque le composant se démonte
      clearInterval(interval) ;
    }
  }, []) ;
}

La fonction de nettoyage sera appelée lorsque le composant sera démonté.

Un exemple courant de démontage d’un composant est le passage à une nouvelle page ou une nouvelle route dans notre application où le composant n’est plus rendu.

Lorsqu’un composant est démonté, notre fonction de nettoyage s’exécute, notre intervalle est effacé et nous n’obtenons plus l’erreur de tentative de mise à jour d’une variable d’état qui n’existe pas.

Enfin, le nettoyage des effets secondaires n’est pas nécessaire dans tous les cas. Il n’est requis que dans quelques cas, par exemple lorsque vous devez arrêter un effet secondaire répété lorsque votre composant se démonte.

Vous voulez vraiment apprendre React ?

Si vous aimez les leçons utiles comme celle-ci et que vous recherchez la ressource ultime pour apprendre React, consultez le site Web React Bootcamp.

Il vous donnera toute la formation dont vous avez besoin pour :

• Passez du statut de débutant absolu à celui de professionnel de React en seulement 30 minutes par jour
• Créez 4 projets React complets, du début jusqu’au déploiement
• Apprenez un ensemble de technologies puissantes pour créer toutes les applications que vous souhaitez

Cliquez pour rejoindre le React Bootcamp