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. Le utiliser() 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 React utiliser() hook et comment l'utiliser dans vos projets React.

Le composant de base

Prenons par exemple le composant suivant :

import {useEffect, useState} from"react"
exportfunctionData({ url }) {
const [isLoading, setIsLoading] = useState(true)
const [isError, setIsError] = useState(false)
const [data, setData] = useState()
 useEffect(() => {
 setIsError(false)
 setIsLoading(true)
 setData(undefined)
 fetch(url)
 .then(res => res.json())
 .then(setData)
 .catch(() => setIsError(true))
 .finally(() => setIsLoading(false))
 })





instagram viewer
return isLoading? (
Loading...</h1>
 ): isError? (

Error</h1>
 ): (
{JSON.stringify(data, null, 2)}</pre>
 )
}

Une fois que React a rendu ce composant, il consomme l'API en utilisant fetch(). Il enregistre ensuite les données dans l'état du composant si la requête a abouti ou définit le estErreur variable à 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.

L'implémentation de useHook()

Le composant ci-dessus est un peu lourd car il est plein de code passe-partout. Pour résoudre ce problème, faites appel au utiliser() 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 :

// package.json
"dependencies": {
"react": "experimental",
"react-dom": "experimental"
}
...

Vous êtes maintenant prêt à utiliser le crochet, en commençant par remplacer le utiliserÉtat et utiliserEffet importe avec seulement utiliser:

import {use} from"react"

À l'intérieur de Donné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 votre utiliser() crochet; il renvoie soit des données JSON, soit une erreur. Définissez ensuite la réponse à une variable appelée données:

exportfunctionData({ url }) {
const data = use(fetch(url).then(res => res.json()))
return<pre>{JSON.stringify(data, null, 2)}pre>
}

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.

État de chargement (Suspense)

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

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

exportdefaultfunctionApp () {
const [url, setUrl] = useState(URL.USERS)
return (
 <>
Loading...</div>}>

 </Suspense>
 </>
 )
}

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

Gestion des erreurs avec limite d'erreur

Lorsqu'il s'agit de détecter les erreurs, vous devez savoir comment fonctionne la limite d'erreur 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 :

import React from"react"
classErrorBoundaryextendsReact.Component{
 state = { hasError: false, error: null }
static getDerivedStateFromError(error) {
return {
 hasError: true,
 error
 }
 }
 render() {
if (this.state.hasError) {
returnthis.props.fallback
 }
returnthis.props.children
 }
}
exportdefault ErrorBoundary;

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. Le rendre() 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 le Limite d'erreur composant comme ceci :

exportdefaultfunctionApp () {
const [url, setUrl] = useState(URL.USERS)
return (
 <>
Oops! There's an error.

exportfunctionData({ url, shouldFetch }) {
let data = "Default data"
if (shouldFetch) {
const data = use(fetch(url).then(res => res.json()))
 }
return<pre>{JSON.stringify(data, null, 2)}pre>
}

exportfunctionData({ url, shouldFetch }) {
let data = "Default data"
if (shouldFetch) {
const data = use(Context)
 }
return<pre>{JSON.stringify(data, null, 2)}pre>
}