Hook useEffect

Le hook useEffect nous permet de synchroniser le composant avec des facteurs/services externes, y compris la récupération de données, les abonnements, les modifications manuelles, etc.

Syntaxe :

Le premier argument (setup) est une fonction fléchée qui sera exécutée après chaque rendu. Le deuxième argument (dependencies) est un tableau optionnel de dépendances. Si les dependencies sont fournies, l'effet ne sera ré-exécuté que si l'une des dépendances a changé depuis le dernier rendu. Si le tableau de dépendances est omis, l'effet s'exécutera après chaque rendu.

Puisque nous savons que le setup doit être une fonction fléchée et que les dependencies doivent être un tableau, nous obtenons l'enregistrement suivant du hook useEffect.

Remarque

Les composants React s'appuient souvent sur la combinaison des hooks useEffect et useState. Ces hooks fonctionnent main dans la main pour gérer l'état et les effets secondaires au sein des composants.

Exemple 1 :

Créons le composant Articles, qui utilisera le hook useEffect pour assigner des données à l'état articles. C'est une excellente occasion d'explorer la puissante combinaison des hooks React.

Dans ce composant, nous utilisons le hook useEffect pour nous assurer que l'état articles est rempli avec des données. Comme mentionné précédemment, la fonction useEffect s'exécute après chaque rendu, garantissant que les données seront affichées à l'utilisateur si elles sont obtenues. Cela assure une expérience utilisateur fluide avec un contenu à jour.

Explication ligne par ligne :

• Ligne 1 : Nous importons les hooks useEffect et useState de la bibliothèque React pour tirer parti de sa fonctionnalité ;
• Ligne 2 : Nous importons la fonction fetchData depuis "../service/api". Cette fonction est responsable de faire une requête API et de récupérer des données ;
• Ligne 4 : Le composant Articles est défini en utilisant la syntaxe de fonction conventionnelle ;
• Ligne 5 : Nous initialisons l'état en utilisant le hook useState, représentant la valeur initiale de la variable articles. Dans cet exemple, c'est un tableau vide ;
• Lignes 7-15 : Le cas d'utilisation réel du hook useEffect ;
  • Ligne 7 et ligne 15 : c'est la syntaxe. C'est ainsi que nous l'utiliserons ;
  • Ligne 8 : la fonction fetchData est appelée. Cette fonction est censée faire une requête API et retourner une promesse ;
  • Lignes 9-11 : Lorsque la promesse est résolue (bloc then), elle reçoit un objet resp. Les données sont extraites de resp en utilisant resp.jokes, qui est défini dans l'état articles en utilisant setArticles ;
  • Lignes 12-14 : S'il y a une erreur lors de la requête API (dans le bloc catch), elle est enregistrée dans la console en utilisant console.error.
• Lignes 17-19 : Le balisage du composant est rendu.

Code complet de l'application :

Exemple 2 :

Créons le composant Counter pour suivre une valeur de counter. La tâche consiste à enregistrer la valeur de la variable counter chaque fois qu'elle change. Pour ce faire, nous allons utiliser le hook useEffect avec un tableau de dépendances composé de la variable counter.

Explication ligne par ligne :

• Ligne 1 : Nous importons les hooks useEffect et useState de la bibliothèque React pour tirer parti de ses fonctionnalités ;
• Ligne 3 : La syntaxe de fonction conventionnelle définit le composant "Counter" ;
• Ligne 4 : Nous initialisons l'état en utilisant le hook useState, représentant la valeur initiale de la variable count. Dans cet exemple, c'est 0 ;
• Lignes 6-8 : Le cas d'utilisation réel du hook useEffect ;
  • Ligne 7 : cette logique se produira chaque fois que la valeur dans le tableau de dépendances change. Dans ce cas, c'est la variable count ;
  • Ligne 8 : tableau de dépendances. Nous informons React que lorsque la valeur de la variable count est modifiée, exécutez le code à l'intérieur de la fonction hook useEffect.
• Lignes 14-19 : Le balisage du composant est rendu.

Code complet de l'application :

Veuillez prendre un moment pour inspecter la console et observer la logique d'exécution de la fonction fléchée à l'intérieur du hook useEffect. La fonction fléchée est d'abord exécutée lors du rendu initial, puis appelée à nouveau chaque fois que la valeur de la variable counter change. Vous pouvez vérifier ce comportement en observant les journaux correspondants dans la console.