Le hook useEffect — Formation Apprendre React

Dans certains cas certains composants vont avoir besoin de transférer des informations à des systèmes externes à React. Dans ce cas là on va pouvoir utiliser la fonction useEffect.

Cette fonction prendra un paramètre une fonction qui sera appelée lorsqu’une des dépendances (passée sous forme de tableau en 2 paramètre). Par exemple il est possible de mettre à jour le titre d’une page en fonction de l’état du composant.

useEffect(() => {
    document.title = title
}, Le hook useEffect — Formation Apprendre React)

Utilisation de cette fonction là doit être limité à la gestions des effets de bord et il sera important de respecter les règles suivantes :

On ne fera pas de changement d’état directement à la racine du useEffect.

// On ne fera jamais ça !
useEffect(() => {
    setTitle(`Editer ${firstname} ${lastname}`)
}, [firstname, lastname])

// On peut simplement créer une variable
const title = `Editer ${firstname} ${lastname}`

En revanche vous pouvez par exemple utiliser un changement d’état dans le cas d’une opération asynchrone.

useEffect(() => {
   fetch('url')
       .then(r => r.json())
       .then((data) => setData(data))
}, [])

Un useEffect qui n’aurait pas de dépendance est un use effect qui ne sera appelé que lors du rendu initial du composant.

Penser à nettoyer

Dans certains cas on peut utiliser le pour venir brancher un écouteur sur un événement global (par exemple écouter le défilement dans la page). Dans ce cas là il sera impératif de penser à supprimer l’écouteur d’événements lorsque le composant est supprimé. Pour cela il faudra retourner une fonction dans la fonction d’appel du useEffect.

useEffect(() => {
  const handler = () => console.log('scroll')
  window.addEventListener('scroll', handler)
  return () => window.removeEventListener('scroll', handler)
})

De manière générale, il faut penser que les composants doivent nettoyer tous les effets de bord qu’ils enregistrent.

Attention aux dépendances

Enfin un dernier point . Lors de l’utilisation d’un use effect dès qu’une variable provenant du composant est utilisée elle devra impérativement être ajoutée au tableau de dépendance. On pourra cependant omettre les fonctions de changement d’état qui ne changent jamais (comme par exemple le setter reçu dans le cas du useState).

Aller plus loin

En apprendre plus sur la documentation