React est une bibliothèque JavaScript populaire largement utilisée pour créer des interfaces utilisateur. L’une des fonctionnalités clés de React est la possibilité de créer des crochets personnalisés. Les crochets personnalisés sont des fonctions réutilisables qui vous permettent d’encapsuler et de partager une logique avec état entre les composants
Cet article explorera comment créer des hooks personnalisés pour des applications React complexes. Nous couvrirons les bases des hooks personnalisés, discuterons des cas d’utilisation courants des hooks personnalisés et expliquerons étape par étape le processus de création d’un hook personnalisé.
Les crochets personnalisés sont des fonctions qui utilisent des crochets React pour encapsuler et partager une logique avec état entre les composants. Les crochets personnalisés peuvent faire abstraction d’une logique complexe et faciliter la réutilisation du code sur différents composants.
Les hooks personnalisés suivent une convention de dénomination spécifique. Ils doivent commencer par le mot “utiliser” suivi d’un nom descriptif, tel que useFetch ou useWindowWidth. Cette convention de dénomination est importante car elle signale aux autres développeurs que la fonction est un hook et peut être utilisée dans d’autres composants.
Les crochets personnalisés peuvent être utilisés pour un large éventail de cas d’utilisation. Voici quelques exemples courants :
Récupération de données : des crochets personnalisés peuvent être utilisés pour récupérer des données à partir d’une API et gérer l’état des données. Cela peut vous aider à éviter la duplication de code entre les composants qui doivent récupérer les mêmes données.
Gestion des formulaires : des crochets personnalisés peuvent être utilisés pour gérer l’état d’un formulaire et gérer les soumissions de formulaires. Cela peut vous aider à éviter d’écrire du code répétitif pour la validation et la soumission des formulaires.
Authentification : des crochets personnalisés peuvent être utilisés pour gérer l’état d’authentification d’une application. Cela peut vous aider à éviter d’écrire du code répétitif pour la logique d’authentification.
Redimensionnement de la fenêtre : des crochets personnalisés peuvent être utilisés pour gérer l’état de la fenêtre du navigateur et mettre à jour les composants lorsque la fenêtre est redimensionnée.
Animation : des crochets personnalisés peuvent être utilisés pour gérer l’état d’une animation et faciliter la réutilisation de la logique d’animation dans différents composants.
Passons en revue le processus de création d’un crochet personnalisé étape par étape. Nous allons créer un crochet personnalisé qui récupère les données d’une API et gère l’état des données.
Étape 1 : Définir le crochet
La première étape de la création d’un crochet personnalisé consiste à définir le crochet. Nous allons commencer par créer un nouveau fichier appelé useFetch.js et définir notre crochet.
import { useState, useEffect } from 'react';const useFetch = (url) => {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
setIsLoading(true);
try {
const response = await fetch(url);
const result = await response.json();
setData(result);
} catch (error) {
setError(error);
}
setIsLoading(false);
};
fetchData();
}, [url]);
return { data, isLoading, error };
};
export default useFetch;
Dans ce code, nous définissons une nouvelle fonction, useFetch, qui prend un seul argument, l’URL du point de terminaison de l’API, à récupérer. A l’intérieur de la fonction, nous utilisons le useState crochet pour gérer l’état des données, isLoading drapeau et message d’erreur. Nous utilisons également le useEffect crochet pour récupérer les données de l’API et mettre à jour l’état lorsque l’URL change.
Enfin, nous renvoyons un objet avec les variables d’état, data, isLoadinget erreur.
Étape 2 : Utilisez le crochet
Maintenant que nous avons défini notre crochet, nous pouvons l’utiliser à l’intérieur d’un composant. Créons un nouveau composant appelé UserList et utiliser le useFetch crochet pour récupérer les données d’une API et les afficher dans une liste.
import useFetch from './useFetch';const UserList = () => {
const { data, isLoading, error } = useFetch('https://jsonplaceholder.typicode.com/users');
if (isLoading) {
return <p>Loading...</p>;
}
if (error) {
return <p>{error.message}</p>;
}
return (
<ul>
{data.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
};
export default UserList;
Dans ce code, nous importons notre useFetch crochet et utilisez-le à l’intérieur du UserList composant pour récupérer les données de l’API. Nous vérifions ensuite l’indicateur isLoading et le message d’erreur pour gérer différents états de la récupération de données. Enfin, nous cartographions sur data array et afficher le nom de chaque utilisateur dans une liste.
Avec ce code, nous avons réussi à encapsuler la logique de récupération des données dans un crochet personnalisé réutilisable et à l’utiliser dans un composant pour afficher une liste d’utilisateurs.
Lors de la création de hooks personnalisés pour des applications React complexes, il y a quelques bonnes pratiques à garder à l’esprit :
Suivez la convention de nommage : Les hooks personnalisés doivent commencer par le mot “use” suivi d’un nom descriptif. Cette convention de dénomination est importante car elle signale aux autres développeurs que la fonction est un hook et peut être utilisée dans d’autres composants.
Rester simple: Les crochets personnalisés doivent être simples et axés sur une tâche spécifique. Si un crochet devient trop complexe, il peut être préférable de le diviser en plusieurs crochets ou de déplacer la logique vers une fonction utilitaire distincte.
Utilisez les bons crochets : Les crochets personnalisés ne peuvent utiliser que d’autres crochets, tels que useState, useEffectet useContext. Les crochets personnalisés ne peuvent pas utiliser d’autres fonctionnalités de React telles que les cycles de vie des composants ou les accessoires.
Testez vos crochets : Les crochets personnalisés sont comme n’importe quel autre code et doivent être testés pour s’assurer qu’ils fonctionnent correctement.