Gancho use() do React: como aplicá-lo e por quê

Este novo gancho pode ajudar a simplificar muitos códigos clichê.

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. Ousar()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 Reactusar()hook e como usá-lo em seus projetos React.

Considere o seguinte componente, por exemplo:

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éErrovariá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.

O componente acima é um pouco complicado, pois está cheio de código clichê. Para resolver esse problema, traga ousar()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:

Agora você está pronto para usar o gancho, começando substituindo ousarEstadoeuseEfeitoimportações com apenasusar:

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

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.

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

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

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

Quando se trata de detectar erros, você precisa saber como funciona o Error Boundary 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:

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. Orenderizar() 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 doLimite de errocomponente assim:

Se algum código aninhado gerar um erro, seu limite de erro irá capturá-lo por meio degetDerivedStateFromError()e atualize o estado, que por sua vez renderiza o texto substituto, "Ops! Há um erro."

Portanto, o gancho use() pode ajudar a reduzir a quantidade de código padrão e facilita o carregamento e os estados de erro. Mas o gancho use() também tem outro uso muito útil.

Vamos supor que você esteja enviando umdeveria buscarbooleano como suporte para oDadoscomponente, e você só deseja executar a solicitação de busca sedeveria buscar/strong>