Ganchos personalizados no React: criar o gancho useJsonFetch

O uso de hooks personalizados no React se estabeleceu como uma abordagem engenhosa para abstrair a lógica recorrente e melhorar a legibilidade e a manutenção de seus componentes. Neste tutorial, você aprenderá como criar seus próprios hooks especificamente para recuperar dados JSON de um servidor usando o exemplo "useJsonFetch ". Vamos mergulhar de cabeça.

Principais lições

• Os hooks personalizados são funções simples que usam hooks do React.
• Eles permitem que a lógica seja reutilizada em vários componentes.
• Um hook personalizado pode lidar com vários estados, como carregamento, dados e erro.
• A estrutura e implementação de um hook personalizado é simples e direta.

Guia passo a passo para criar o hook useJsonFetch

Considerações básicas

Antes de escrever o seu próprio hook, é importante definir a funcionalidade de que necessita. Neste caso, pretende criar um hook que recupera dados JSON de um servidor. Chamamos ao nosso hook "useJsonFetch". Para entender como implementar esse hook, primeiro veja o uso de useJsonFetch em um componente.

O utilizador chama o hook e passa o URL a partir do qual pretende obter os dados JSON. O hook será responsável por recuperar os dados e tratar os estados de carga e erro.

Implementação de useJsonFetch

Para implementar o hook personalizado, crie um novo arquivo que começa com "use" para cumprir as convenções do React. O nome do arquivo seria, portanto, useJsonFetch.js.

Nesse arquivo, você cria uma função que aceita o URL como um parâmetro. Na função, você define os estados para dados, erro e carregamento.

Aqui, os dados são inicialmente indefinidos, o erro também é indefinido e o carregamento começa com true para indicar o estado de carregamento. Isto deve-se à forma como o JavaScript lida com operações assíncronas.

Utilização de useEffect

Dentro do gancho, você usa useEffect para iniciar o processo de busca quando o componente é montado. Certifique-se de que actualiza o estado de carregamento em conformidade.

Com await, chama primeiro o URL com fetch. Como fetch retorna uma promessa, você pode esperar pela resposta com await. Depois de recuperar a resposta, converte os dados num objeto JavaScript com.json().

Se ocorrer um erro, capture-o com try-catch e defina o estado do erro. Independentemente de o pedido ter sido bem sucedido ou de ter ocorrido um erro, deve certificar-se de que define o carregamento como falso assim que a resposta chegar.

Devolver o gancho

No final, devolve os estados data, error e loading como um objeto, de modo a que estes valores estejam disponíveis para o componente que os chama.

Utilizar o hook num componente

Agora que criou o seu hook, pode utilizá-lo no seu componente. Importe useJsonFetch para o seu componente e use a desestruturação para obter os valores.

Em seguida, é possível implementar o indicador de carregamento consultando o carregamento e exibir os dados recuperados quando estiverem disponíveis.

Ao utilizar o useJsonFetch, pode manter a separação lógica entre a recuperação de dados e a lógica da IU, o que melhora muito a manutenção dos seus componentes.

Conclusão sobre a criação de hooks personalizados

A criação de hooks personalizados é um processo simples mas eficaz que o ajuda a organizar o seu código. Pode encapsular a lógica reutilizável e implementá-la em qualquer componente que exija a mesma funcionalidade. Ao utilizar os hooks personalizados, pode também separar a pesquisa de rede e a resposta a condições de carga ou de erro da apresentação de dados.

Resumo

Com um hook personalizado como useJsonFetch, você aprende como gerenciar buscas assíncronas de dados no React. Isso melhora significativamente a reutilização e a estrutura do seu código. Você viu como pode construir uma estrutura simples para recuperar dados JSON e gerenciar os diferentes estados de forma eficaz.