Hook use() de React : comment l'appliquer et pourquoi

Ce nouveau hook peut aider à simplifier une grande partie du code passe-partout.

Les applications React que vous développez récupèrent souvent des données à partir d'une API externe, et l'équipe React s'est assurée de répondre à ce besoin. Leutiliser()hook simplifie le processus de récupération de données.

En utilisant ce hook, vous réduirez la quantité de code passe-partout dont vous avez besoin pour définir les promesses et mettre à jour l’état de l’application. Apprenez tout sur Reactutiliser()hook et comment l'utiliser dans vos projets React.

Prenons par exemple le composant suivant :

Une fois que React a rendu ce composant, il consomme l'API à l'aide de fetch(). Il enregistre ensuite les données dans l'état du composant si la requête a abouti ou définit leestErreurvariable à true si ce n'était pas le cas.

Selon l'état, il restitue ensuite soit les données de l'API, soit un message d'erreur. Pendant que la requête API est en attente, elle affiche un texte « Chargement… » sur la page.

Le composant ci-dessus est un peu lourd car il est plein de code passe-partout. Pour résoudre ce problème, faites appel auutiliser()accrochez et refactorisez votre code.

Avec le hook use(), vous pouvez réduire le composant ci-dessus à seulement deux lignes de code. Mais avant de faire cela, notez que ce hook est plutôt nouveau et vous ne pouvez donc l'utiliser que dans la version expérimentale de React. Assurez-vous donc que vous utilisez cette version :

Vous êtes maintenant prêt à utiliser le crochet, en commençant par remplacer leutiliserÉtatetutiliserEffetimporte avec seulementutiliser:

À l'intérieur deDonnées composant, la seule chose que vous allez conserver est la demande de récupération. Mais vous devrez envelopper la demande de récupération dans votreutiliser() crochet; il renvoie soit des données JSON, soit une erreur. Définissez ensuite la réponse à une variable appeléedonnées:

C'est tout! Comme vous pouvez le voir, le code ci-dessus réduit le composant à seulement deux lignes de code. Cela montre à quel point le hook use() peut être utile dans des scénarios comme celui-ci.

Une partie importante duutiliser() hook gère les états de chargement et d’erreur. Vous pouvez le faire dans le composant parent deDonnées.

Pour implémenter la fonctionnalité de chargement, enveloppez leDonnéescomposant avecLe suspense . Ce composant prend un accessoire de secours qu'il affichera à chaque fois que vous êtes en état de chargement :

Leutiliser() le hook dans le composant Data déclenche le chargement de ce suspense. Même si la promesse n'est pas encore tenue, leApplication Le composant rendra l’état de repli. Puis, lorsque leDonnéesLe composant reçoit les données de réponse, il restitue le contenu au lieu de l'état de chargement.

Lorsqu'il s'agit de détecter les erreurs, vous devez savoir comment fonctionne Error Boundary pour l'utiliser. En règle générale, vous l'utiliserez lorsque vous travaillerez avec Suspense.

Un exemple de limite d’erreur se trouve dans le code suivant :

Cet exemple de limite d'erreur comporte un objet d'état qui suit l'état de l'erreur et la nature de l'erreur. Ensuite, il obtient l'état dérivé de cette erreur. Lerendre() La fonction affiche l'élément de secours en cas d'erreur. Sinon, il restitue tout ce qui se trouve à l'intérieur du.

Le composant ci-dessus fonctionne à peu près de la même manière que Suspense. Ainsi, dans le composant App, vous pouvez tout envelopper dans leLimite d'erreurcomposant comme ceci :

Si l'un des codes imbriqués génère une erreur, votre limite d'erreur la détectera viagetDerivedStateFromError()et mettez à jour l'état, qui à son tour affiche le texte de secours : "Oups ! Il y a une erreur".

Ainsi, le hook use() peut aider à réduire la quantité de code passe-partout et facilite le chargement et les états d'erreur. Mais le hook use() a également une autre utilisation très pratique.

Supposons que vous envoyez undevraitFetchbooléen comme accessoire pour leDonnéescomposant, et vous souhaitez uniquement exécuter la demande d'extraction sidevraitFetch/strong>