A maioria dos aplicativos que criamos hoje consome dados de fontes externas por meio de APIs. Eles buscam dados de um servidor e os exibem em sua interface do usuário.

Usando o React, você pode criar um gancho personalizado para buscar dados de uma API. Dada uma URL, esse gancho retornará um objeto contendo os dados e uma mensagem de erro opcional. Você pode então usar este gancho em um componente.

Criando um Hook React Customizado

Comece criando um novo arquivo chamado useFetch.js. Nesse arquivo, crie uma função chamada useFetch() que aceite uma string de URL como parâmetro.

const useBuscar = (url) => {
}

O gancho deve fazer a chamada da API imediatamente após ser chamado. Você pode usar o gancho useEffect() por esta.

Para as chamadas de API reais, use a API de busca. Essa API é uma interface baseada em promessas que permite fazer solicitações e receber respostas por HTTP de forma assíncrona.

No gancho personalizado useFetch(), adicione o seguinte.

importar { useEffect, useState} a partir de "reagir";

const useBuscar = (url) => {
const [dados, setdata] = useState(nulo);
const [carregando, setloading] = useState(verdadeiro);
 const [erro, seterror] = useState("");


useEfeito(() => {
 buscar (url)
 .then((res) => res.json())
 .then((dados) => {
seterror(dados.erro)
definir dados(dados.Piada)
 setloading(falso)
 })
 }, [url]);


Retorna { dados, carregamento, erro };
};
exportarpredefinição useBuscar;

Neste gancho, você está inicializando primeiro o estado de três valores:

  • data: contém a resposta da API.
  • error: Mantém uma mensagem de erro se ocorrer um erro.
  • loading: contém um valor booleano que indica se ele buscou os dados da API. Inicialize o estado de carregamento como verdadeiro. Depois que a API retornar dados, defina-os como false.

O gancho useEffect() recebe a string de URL como argumento. Isso é para garantir que ele seja executado sempre que a URL for alterada.

A função useFetch() retornará um objeto contendo os dados, carregamento e valores de erro.

Usando um Hook Custom React

Para usar o gancho personalizado useFetch() que você acabou de criar, comece importando-o:

const useBuscar = exigir("./useFetch")

Em seguida, use-o da seguinte forma:

const {dados, carregando, erro} = useFetch (url)

Para demonstrar, considere o seguinte componente Piadas:

const Piadas = () => {
 URL const = "<https://sv443.net/jokeapi/v2/joke/Programming? tipo = único>";
const { dados, carregamento, erro } = useFetch (url);
E se (carregando) Retorna (
<div>Carregando...</div>
 )


Retorna (
<div>
 {erro &&<div>{erro}</div>}
 {dados &&<div>{<div>{dados}</div>}</div>}
</div>
 );
};
exportarpredefinição Piadas;

Ele chama o gancho useFetch() com a URL para a API de piadas e recebe os dados, carregamento e valores de erro.

Para renderizar o componente Jokes, primeiro verifique se Loading é true. Se estiver, exiba uma instrução “Loading…”, caso contrário, renderize os dados e a mensagem de erro, se houver.

Por que usar ganchos de reação personalizados?

Assim como você usou o gancho personalizado useFetch() neste componente, você pode reutilizá-lo novamente em outros componentes. Essa é a beleza de externalizar a lógica em ganchos em vez de escrevê-la em cada componente.

Hooks são um recurso poderoso do React que você pode usar para melhorar a modularidade do seu código.