Créer un custom hook avec React Hooks, AbortController et Axios pour gérer les appels API

Le développement de nos jours d'applications web modernes implique souvent l'utilisation d'API pour récupérer des données à afficher à l'utilisateur. Toutefois, pour garantir un code réutilisable, les hooks personnalisés sont des outils de premier choix pour les développeurs. C'est pourquoi, dans cet article, nous allons explorer comment créer un hook personnalisé complexe pour récupérer des données en utilisant les hooks #useState, #useEffect, #axios et l'API AbortController de #javascript.

Avant de plonger dans les détails de la création de notre hook personnalisé, nous allons examiner de plus près chacun de ces outils pour mieux comprendre leur fonctionnement.

Tout d'abord, useState est un hook de React qui permet de stocker et de mettre à jour l'état local d'un composant. Bien que cela puisse paraître simple à première vue, il offre de nombreuses fonctionnalités complexes pour gérer l'état d'un composant.

Ensuite, useEffect est un autre hook de React qui permet de gérer les effets de bord (side effects) dans les fonctions composants, tels que la récupération de données à partir d'une API. Grâce à cette fonctionnalité, les développeurs peuvent facilement mettre en place des mises à jour en temps réel de leur application.

Si vous utilisez React 18 avec le mode strict activé, vous avez peut-être remarqué que tous vos effets d'utilisation sont appelés deux fois. Cela peut être un peu déroutant et peut causer des problèmes si vous avez des appels d'API dans vos effets utilisateur, car cela pourrait entraîner un double trafic en mode développement. Une solution consiste à utiliser un contrôleur d'abandon pour terminer la demande dès le premier useEffect.

L'API AbortController de JavaScript est une fonctionnalité relativement nouvelle qui permet d'abandonner les requêtes HTTP en cours. Cette fonctionnalité permet aux développeurs de mieux gérer les erreurs de leur application.

Enfin, Axios est une bibliothèque JavaScript populaire qui permet de faire des requêtes HTTP depuis le navigateur ou le serveur. En raison de sa facilité d'utilisation et de sa grande flexibilité, elle est largement utilisée par les développeurs.

Maintenant que nous avons examiné les outils que nous allons utiliser, voici comment créer notre hook personnalisé pour récupérer des données en utilisant les hooks useState, useEffect, axios et l'API AbortController de JavaScript.

Pour commencer, vous devez créer un nouveau fichier pour votre hook, par exemple "useFetch.js". Ensuite, vous devez importer les hooks useState, useEffect et axios. Ensuite, créez une fonction nommée useFetch qui prend en paramètre une URL. Cette fonction va renvoyer un tableau avec trois éléments: les données récupérées, un indicateur de chargement et des messages d’erreurs.

Dans la fonction useFetch, utilisez le hook useState pour initialiser l'état local de votre composant avec les données récupérées, un indicateur de chargement à “true/false” et des messages d’erreurs ou leur absence. Utilisez ensuite le hook useEffect pour effectuer une requête HTTP avec axios lorsque le composant est monté. Appliquez l'API AbortController pour annuler la requête si le composant est démonté avant que la réponse ne soit reçue. 

Enfin, intégrez votre fonction de nettoyage pour mettre à l'état initial vos states afin qu'ils soient prêts à être réutilisés.

Comme vous pouvez le voir, j'utilise l'URL dans le paramètre et dans le dépendance comme un trigger.

En résumé, en utilisant les hooks useState et useEffect de React, ainsi que la bibliothèque Axios et AbortController de JavaScript, il est possible de créer un hook personnalisé sophistiqué pour récupérer des données, qui serait facilement réutilisable et simple à maintenir.