Le hook d'effet, comme pour le hook d'état, fait parti des hooks de React que l'on va utiliser régulièrement. Comme un composant de fonction n'a pas de méthode à disposition pour venir se positionner sur le cycle de vie d'un composant React, nous devons passer par ce hook d'effet : useEffect afin d'intervenir sur les évènements du cycle de vie du composant.
useEffect est une fonction qui accepte 2 paramètres :
Voici un exemple d'utilisation du useEffect avec uniquement un callback. Il aura pour effet de se déclencher sur le cycle de vie du montage et de la mise à jour. En somme, c'est l'équivalent de la fonction componentDidMount et componentDidUpdate. Sur un composant de classe nous aurions eu :
Afin d'intervenir uniquement durant le montage du composant, le componentDidMount, il vous faut ajouter le 2eme paramètre que peut accepter useEffect. Comme nous n'écoutons rien de particulier, nous allons lui fournir un tableau vide : []
Pour que vous puissiez effectuer des actions lors d'un changement d'état du composant, il va falloir que vous spécifiez l'état que vous souhaitez écouter dans le 2ème paramètre du useEffect. Ce paramètre est un tableau ce qui vous permet d'avoir un seul useEffect pour différents états. Vous pouvez également en distinguer plusieurs.
L'avantage par rapport à un composant de classe c'est que vous n'avez pas besoin de tester la prevProps et nextProps pour savoir sur quel élément vous souhaitez effectuer une action. Il vous suffit de passer la valeur au useEffect pour savoir ce que l'on est en train de traiter.
Par exemple, nous allons imaginer que nous souhaitons effectuer un appel API lorsque nous allons ouvrir une modal.
Attention, lorsque vous écoutez une valeur, l'exécution du useEffect intervient également à l'initialisation de la valeur comme sur le componentDidMount. Si vous ne souhaitez pas qu'il s'exécute, il faut penser à gérer la valeur par défaut / d'initialisation.
Chaque useEffect que vous déclarez vous donne accès à un callback permettant d'intervenir sur le démontage du composant. Il s'agit du retour de votre fonction dans le useEffect dans laquelle vous fournissez une fonction de rappelle.
Cette fonction de rappelle va s'exécuter lors du démontage du composant. Vous aurez besoin de l'utiliser régulièrement si vous gérez des évènements spécifiques dans le contexte du JavaScript en général. Typiquement, si vous utilisez un setInterval dans un composant de fonction, il faudra bien penser à le couper!