Las aplicaciones React que desarrolle a menudo obtendrán datos de una API externa, y el equipo de React se ha asegurado de satisfacer esta necesidad. El usar() Hook simplifica el proceso de obtención de datos.

Con este enlace, reducirá la cantidad de código repetitivo que necesita para definir promesas y actualizar el estado de la aplicación. Aprende todo sobre React usar() Hook y cómo usarlo en tus proyectos de React.

El componente básico

Considere el siguiente componente, por ejemplo:

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))
 })
return isLoading? (
Loading...</h1>
 ): isError? (

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

Una vez que React renderiza este componente, consume la API usando fetch(). Luego guarda los datos en el estado del componente si la solicitud fue exitosa o establece el esError variable a verdadero si no lo fuera.

Dependiendo del estado, muestra datos de la API o un mensaje de error. Mientras la solicitud de API está pendiente, muestra el texto "Cargando..." en la página.

La implementación de useHook()

El componente anterior es un poco engorroso ya que está lleno de código repetitivo. Para solucionar este problema, introduzca el usar() Enganche y refactorice su código.

Con el gancho use(), puede reducir el componente anterior a solo dos líneas de código. Pero antes de hacer eso, tenga en cuenta que este gancho es bastante nuevo, por lo que solo puede usarlo en la versión experimental de React. Así que asegúrate de estar usando esa versión:

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

Ahora está listo para usar el gancho, comenzando por reemplazar el usoEstado y usoEfecto importa con solo usar:

import {use} from"react"

Dentro de Datos componente, lo único que conservará es la solicitud de recuperación. Pero necesitarás incluir la solicitud de recuperación dentro de tu usar() gancho; devuelve datos JSON o un error. Luego establece la respuesta a una variable llamada datos:

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

¡Eso es todo! Como puede ver, el código anterior reduce el componente a solo dos líneas de código. Eso demuestra cuán útil puede ser el gancho use() en escenarios como este.

Estado de carga (suspenso)

Una parte importante del usar() Hook maneja los estados de carga y error. Puedes hacer esto dentro del componente principal de Datos.

Para implementar la funcionalidad de carga, ajuste el Datos componente con Suspenso. Este componente requiere un accesorio alternativo que se representará cada vez que esté en el estado de carga:

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

 </Suspense>
 </>
 )
}

El usar() El gancho en el componente de datos desencadena este suspenso para cargar. Si bien la promesa aún no se ha resuelto, el Aplicación El componente mostrará el estado de reserva. Entonces, cuando el Datos El componente recibe los datos de respuesta, representa el contenido en lugar del estado de carga.

Manejo de errores con límite de error

Cuando se trata de detectar errores, es necesario saber cómo funciona el límite de error para usarlo. Normalmente, lo usará cuando trabaje con Suspense.

Un ejemplo de un límite de error se encuentra en el siguiente código:

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;

Este ejemplo de límite de error tiene un objeto de estado que rastrea el estado del error y cuál es el error. A continuación, obtiene el estado derivado de ese error. El prestar() La función muestra el elemento de reserva si hay un error. De lo contrario, renderiza lo que esté dentro del .

El componente anterior funciona prácticamente igual que Suspense. Entonces, en el componente App, puedes envolver todo dentro del Límite de error componente así:

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>
}