Os aplicativos React que você desenvolve geralmente buscam dados de uma API externa, e a equipe React fez questão de atender a essa necessidade. O usar() hook simplifica o processo de busca de dados.

Usando esse gancho, você reduzirá a quantidade de código padrão necessário para definir promessas e atualizar o estado do aplicativo. Saiba tudo sobre React usar() hook e como usá-lo em seus projetos React.

O componente básico

Considere o seguinte componente, por exemplo:

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

Depois que o React renderiza esse componente, ele consome a API usando fetch(). Em seguida, ele salva os dados no estado do componente se a solicitação for bem-sucedida ou define o éErro variável para true se não fosse.

Dependendo do estado, ele renderiza dados da API ou uma mensagem de erro. Enquanto a solicitação da API está pendente, ela mostra o texto "Carregando..." na página.

A implementação useHook()

O componente acima é um pouco complicado, pois está cheio de código clichê. Para resolver esse problema, traga o usar() conecte e refatore seu código.

Com o gancho use(), você pode reduzir o componente acima para apenas duas linhas de código. Mas antes de fazer isso, observe que este gancho é bastante novo, então você só pode usá-lo na versão experimental do React. Portanto, certifique-se de usar essa versão:

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

Agora você está pronto para usar o gancho, começando substituindo o usarEstado e useEfeito importações com apenas usar:

import {use} from"react"

Dentro de Dados componente, a única coisa que você manterá é a solicitação de busca. Mas você precisará agrupar a solicitação de busca dentro do seu usar() gancho; ele retorna dados JSON ou um erro. Em seguida, defina a resposta para uma variável chamada dados:

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

Isso é tudo! Como você pode ver, o código acima reduz o componente a apenas duas linhas de código. Isso demonstra o quão útil o gancho use() pode ser em cenários como este.

Estado de carregamento (suspensão)

Uma parte importante do usar() hook está lidando com os estados de carregamento e erro. Você pode fazer isso dentro do componente pai do Dados.

Para implementar a funcionalidade de carregamento, envolva o Dados componente com Suspense. Este componente usa um suporte substituto que será renderizado sempre que você estiver no estado de carregamento:

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

 </Suspense>
 </>
 )
}

O usar() hook no componente Data aciona esse suspense para carregar. Embora a promessa ainda não tenha sido resolvida, o Aplicativo componente renderizará o estado de fallback. Então, quando o Dados componente recebe os dados de resposta, ele renderiza o conteúdo em vez do estado de carregamento.

Tratamento de erros com limite de erro

Quando se trata de detectar erros, você precisa saber como funciona o limite de erro para usá-lo. Normalmente, você o usará quando estiver trabalhando com o Suspense.

Um exemplo de limite de erro está no código a seguir:

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 exemplo de limite de erro possui um objeto de estado que rastreia o estado do erro e qual é o erro. A seguir, ele obtém o estado derivado desse erro. O renderizar() A função exibe o elemento substituto se houver um erro. Caso contrário, ele renderiza tudo o que estiver dentro do .

O componente acima funciona praticamente da mesma forma que o Suspense. Então, no componente App, você pode agrupar tudo dentro do Limite de erro componente assim:

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