Crochets de réaction : useEffect

La dernière fois que j'ai écrit sur le crochet useState, je vais maintenant expliquer ce que fait le crochet useEffect dans React. Le crochet useEffect a été développé pour relever certains des défis posés par les méthodes de cycle de vie des composants de la classe ES6. Si vous comprenez les méthodes de cycle de vie des composants de classe, ce crochet est équivalent aux méthodes de cycle de vie componentDidMount, componentDidUpdate et componentDidUnmount. Je vais utiliser un exemple qui montrera comment les crochets peuvent remplacer ces méthodes de cycle de vie.

Tout d'abord, regardons à quoi ressemble useEffect. Ce crochet est une fonction qui prend deux arguments. Le premier est un rappel avec la logique des effets secondaires à l'intérieur. Le second est un tableau facultatif de dépendances. Le crochet useEffect exécute le rappel uniquement si les dépendances changent entre les rendus. Cela vous permet de contrôler le moment où l'effet secondaire s'exécute. Regardons à quoi ressemblent les dépendances et ce qu'elles font.

Si vous ne fournissez pas de tableau de dépendances, l'effet secondaire s'exécute après chaque rendu.

Si vous fournissez un tableau vide, l'effet secondaire ne s'exécute qu'après le rendu initial, similaire à componentDidMount.

Si vous fournissez une valeur d'état ou de prop dans le tableau, l'effet secondaire s'exécute chaque fois que la dépendance change, similaire à componentDidUpdate.

Faisons un exemple avec un programme simple. Mon composant aura un bouton qui incrémentera un compteur. Lorsque le compteur atteint un certain nombre, le titre du document change. Commençons par configurer le composant avec le minimum. Il aura un état pour le compteur et une fonction de gestionnaire.

Comme vous pouvez le voir, j'ai déjà une fonction useEffect sur ce composant. Sur le rendu initial des composants, "Mounted" est enregistré sur la console. Lorsque le bouton est cliqué, le nombre est incrémenté de 1. Parfait maintenant, disons que nous voulons enregistrer quelque chose sur la console à chaque fois que le composant est rendu, mais pas sur le rendu initial. La meilleure chose à propos des crochets est que vous pouvez en avoir plusieurs dans le même composant. J'aurai quelques instructions conditionnelles pour contrôler le moment où l'effet s'exécute. Il ressemblera à ceci.

J'ai créé une variable définie sur false qui empêchera l'effet de se déclencher lors du premier rendu. Après cela, chaque fois que le compteur est incrémenté, vous pourrez voir que la console imprime correctement. C'est parce que ce crochet n'avait pas d'argument de dépendance, il s'affiche donc à chaque fois que l'état change. Implémentons maintenant un filtre qui changera le titre du document après qu'un certain nombre soit atteint dans le compteur. Pour cela, je devrai utiliser un autre crochet d'état et définir une autre instruction conditionnelle.

Désormais, lorsque le compteur atteint 11, le titre du document est mis à jour. En effet, une fois la condition remplie, la valeur de l'état du filtre est modifiée sur true et le hook s'exécute. Il y a encore une chose que nous pouvons faire avec useEffect. Certains effets secondaires nécessitent un nettoyage, comme la suppression des minuteries. Si un rappel renvoie une fonction, le crochet considérera cela comme un nettoyage d'effet.

Vous verrez que le nettoyage s'exécutera après chaque rendu. Ceci est similaire à ce que vous pouvez faire dans les composants de classe avec componendDidUnmount.

J'ai eu beaucoup de plaisir à apprendre ce crochet. C'est l'un des crochets les plus importants et aussi l'un des plus délicats. Après un peu de pratique avec cela, cela a tellement de sens. Eh bien, c'est tout pour useEffect. Bon codage !