Voici trois hooks personnalisés qui ajouteront des fonctionnalités essentielles à vos projets React en une seule ligne de code.
Les hooks React sont puissants pour leur capacité à nous donner des fonctionnalités étatiques réutilisables et distinctes de nos composants.
J’ai établi une courte liste de trois hooks React personnalisés qui valent la peine d’être utilisés dans presque tous les projets que vous réalisez.
1. useFetch Hook
Dans pratiquement toutes les applications que vous réalisez, vous allez récupérer des données à partir d’une API externe.
L’approche standard est de faire l’appel à l’API dans useEffect et de l’exécuter en utilisant l’API fetch, qui est intégrée dans le navigateur.
function BlogPosts() {
const [data, setData] = useState([]) ;
useEffect(() => {
fetch("http://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((data) => setData(data)) ;
}, []) ;
}Non seulement ce code est un peu lourd pour effectuer la requête GET, la convertir en JSON et la mettre en état, mais il n’est pas réutilisable.
Si vous vouliez le réutiliser, vous devriez déclarer useState et useEffect dans ce composant également.
Enfin, notre code ne gère aucun état d’erreur ou de chargement, qui sont nécessaires pour récupérer des données au moment de l’exécution dans notre client React.
Heureusement, le hook useFetch est une bien meilleure abstraction qui résout toutes ces considérations en une seule ligne de code.
Le seul code supplémentaire que nous devons ajouter est quelques conditionnels qui gèrent nos états de chargement et d’erreur :
import useFetch de "react-fetch-hook" ;
function BlogPosts() {
const { isLoading, error, data } = useFetch('http://jsonplaceholder.typicode.com/posts') ;
if (isLoading) return
;
if (error) return
;
// retourner les données ici...
}
Vous obtenez le même résultat, mais avec moins de code, une gestion des erreurs supplémentaire et une meilleure expérience utilisateur (si vous utilisez un joli spinner de chargement).
Vous pouvez installer useFetch en exécutant :
npm install react-fetch-hook
Si vous voulez un hook tiers encore plus avancé pour récupérer vos données (qui peut prendre en charge la récupération et la mise en cache de vos requêtes), consultez SWR et React Query.
2. hook useForm
L’écriture de formulaires dans React peut être une douleur, car elle est répétitive et implique généralement beaucoup de code pour ajouter des fonctionnalités communes comme la validation.
Voici à quoi ressemble un formulaire très basique dans React, où nous avons une seule entrée d’email et gérons la soumission du formulaire avec handleSubmit.
import isEmail from "validator/lib/isEmail" ;
function EmailForm() {
function handleSubmit(event) {
event.preventDefault() ;
const email = event.target.elements.email.value ;
if (isEmail(email)) {
console.log("formulaire soumis : ", email) ;
}
}
return (
) ;
}Mais remarquez que nous avons du code plus impératif, où nous devons utiliser event.preventDefault() pour dire à la page de ne pas se recharger, pour obtenir la valeur de l’email à partir de l’objet elements sur notre élément cible (le formulaire lui-même), et ensuite valider l’email en utilisant le validateur de la bibliothèque.
Oui, nous validons la valeur de l’adresse électronique qui est saisie, mais s’il y a une erreur de validation, nous devons en informer l’utilisateur.
En utilisant le hook useForm de @mantine/hooks, nous disposons d’un hook personnalisé et réutilisable pour gérer l’état de notre formulaire et afficher facilement les erreurs à l’utilisateur.
import { TextInput, Button } de "@mantine/core" ;
import { useForm } de "@mantine/hooks" ;
import isEmail de "validator/lib/isEmail" ;
export default function EmailForm() {
const form = useForm({
initialValues : { email : "" },
errorMessages : { email : "L'adresse électronique est requise" },
validationRules : {
email : (valeur) => isEmail(valeur),
},
}) ;
fonction handleSubmit(values) {
console.log("formulaire soumis : ", valeurs) ;
}
return (; }
En appelant le hook useForm et en spécifiant le message d’erreur et la validation pour chaque champ, la valeur du formulaire nous donne toutes les fonctionnalités dont nous avons besoin dans notre formulaire grâce à des fonctions d’aide comme getInputProps et onSubmit.
Voici maintenant à quoi ressemble l’état du formulaire lorsque l’utilisateur ne fournit pas une adresse électronique valide :
Notez que dans de nombreux cas, les entrées HTML fournissent toute la validation dont vous avez besoin pour des valeurs communes comme les emails, simplement en ajoutant l’attribut
required
.
Vous pouvez installer useForm en exécutant :
npm install @mantine/hooks
3. useLocalStorage Hook
Il est utile dans les applications React de pouvoir stocker l’état de l’utilisateur localement dans le navigateur.
Si nous avions une application de streaming vidéo comme YouTube, nous pourrions enregistrer les préférences vidéo de l’utilisateur (comme l’activation ou la désactivation de la lecture automatique) ou la progression de la vidéo dans le stockage local de son navigateur.
La difficulté de l’utilisation du stockage local, cependant, est que tous les types de données JavaScript doivent être convertis en chaînes de caractères simples.
Nous le faisons souvent en utilisant JSON.stringify. Mais si nous voulons sortir l’élément du stockage local et utiliser les données, celles-ci doivent être reconverties dans leur type de données d’origine. Pour ce faire, nous utilisons JSON.parse.
Cela peut être assez délicat, surtout si nous construisons une application React orientée serveur comme Next.js qui ne peut pas toujours accéder au navigateur et donc aux API de fenêtre comme le stockage local.
Que pouvons-nous faire ?
Un hook très utile à utiliser provient à nouveau de @mantine/hooks et s’appelle useLocalStorageValue.
Imaginons que nous créions une bascule qui stocke un paramètre de lecture automatique pour les vidéos de nos utilisateurs, qui peut être défini sur « on » ou « off ».
Tout ce que nous devons fournir pour useLocalStorageValue est la clé à laquelle nous voulons affecter notre valeur dans le stockage local et sa valeur par défaut.
Il fonctionne de la même manière que useState et nous donne une variable d’état et une fonction setter à mettre à jour.
import { useLocalStorageValue } de "@mantine/hooks" ;
export default function ToggleAutoplay() {
const [autoplay, setAutoplay] = useLocalStorageValue({
key : "autoplay",
defaultValue : "on",
}) ;
function toggleAutoplay() {
setAutoplay((current) => (current === "on" ? "off" : "on")) ;
}
return (
) ;
}Dans notre exemple, un clic sur le bouton fait basculer la lecture automatique sur la valeur opposée et la couleur d’arrière-plan devient verte si elle est activée et rouge dans le cas contraire.
Mais le plus important, c’est que la valeur est enregistrée dans le navigateur de l’utilisateur, de sorte que lorsqu’il actualise sa page, son choix le plus récent est mémorisé.
Vous pouvez installer useLocalStorageValue en exécutant :
npm install @mantine/hooks
Vous voulez vraiment apprendre React ?
Si vous avez apprécié cet article et que vous recherchez la ressource ultime pour apprendre React, consultez le site web de l’association React Bootcamp.
Il vous donnera toute la formation dont vous avez besoin pour :
- Passez du statut de débutant absolu à celui de professionnel de React en seulement 30 minutes par jour
- Créez 4 projets React complets, du début jusqu’au déploiement
- Apprenez un ensemble de technologies puissantes pour construire n’importe quelle application
Cliquez pour rejoindre le React Bootcamp
