Se você estiver construindo um aplicativo React que busca dados de uma API, você pode acabar escrevendo um código semelhante repetidamente para lidar com o carregamento, erro e estados de dados.

Um gancho personalizado pode ajudar a evitar essa duplicação e tornar seu código mais modular e reutilizável.

Neste artigo, exploraremos como implementar um useFetchgancho no React que usa o Axios para buscar dados e oferece suporte ao cache para evitar solicitações de rede desnecessárias. No final deste artigo, você terá um gancho personalizado que poderá usar em seus próprios projetos React.

Pré-requisitos

Antes de começarmos, você deve ter alguma familiaridade com React e hooks. Você também precisará ter o Axios instalado em seu projeto. Se ainda não o fez, você pode instalá-lo executando o seguinte comando:

npm install axios

Vamos começar criando um novo arquivo chamado useFetch.js. É aqui que definiremos nosso gancho personalizado.

import { useState, useEffect } from 'react';
import axios from 'axios';

const useFetch = (url, options = {}) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(url, options);

        setData(response.data);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
      }
    };

    const cacheData = localStorage.getItem(url);
    if (cacheData) {
      setData(JSON.parse(cacheData));
      setLoading(false);
    } else {
      fetchData();
    }
  }, [url, options]);

  useEffect(() => {
    if (data) {
      localStorage.setItem(url, JSON.stringify(data));
    }
  }, [data, url]);

  return { loading, error, data };
};

export default useFetch;

Primeiro, importamos os ganchos useStatee useEffectdo React, bem como do Axios.

Em seguida, definimos nosso gancho personalizado chamado useFetch. Esse gancho recebe dois argumentos: a URL a ser buscada e um objeto opcional contendo opções do Axios, como cabeçalhos, parâmetros de consulta e assim por diante.

Dentro do useFetchgancho, definimos três variáveis ​​de estado usando o useStategancho: loading, errore data. Essas variáveis ​​acompanharão o estado de carregamento, quaisquer erros que ocorram durante a busca e os dados buscados, respectivamente.

Em seguida, definimos um efeito usando o useEffectgancho. Este efeito é responsável por buscar os dados e atualizar as variáveis ​​de estado de acordo. Aqui está o que ele faz:

1. Ele define uma função assíncrona chamada fetchDataque faz uma solicitação Axios GET para a URL especificada com as opções especificadas.
2. Se a solicitação for bem-sucedida, ela atualizará a datavariável de estado com os dados de resposta e definirá loadingcomo false.
3. Se ocorrer um erro, ele atualiza a errorvariável de estado com o erro e define loadingcomo falso.
4. Ele verifica se os dados já estão armazenados em cache no armazenamento local. Se for, ele define a datavariável de estado para os dados em cache e define loadingcomo false. Se não estiver, ele chama a fetchDatafunção para buscar os dados.

Finalmente, definimos outro efeito usando o useEffectgancho. Esse efeito é responsável por armazenar em cache os dados no armazenamento local sempre que a datavariável de estado muda. Aqui está o que ele faz:

1. Ele verifica se dataé verdadeiro (ou seja, não é null, undefinedou false). Se for, ele armazena os dados no armazenamento local usando o localStorage.setItemmétodo.
2. O efeito só é executado quando as variáveis data​​ou urlmudam.

Usando o useFetchGancho

Agora que definimos nosso gancho personalizado, vamos ver como usá-lo em um componente.

Aqui está um componente de exemplo que usa o useFetchgancho para buscar dados de uma API:

import useFetch from './useFetch';

const MyComponent = () => {
  const { loading, error, data } = useFetch('https://jsonplaceholder.typicode.com/posts');

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default MyComponent;

O useFetchgancho retorna um objeto com três variáveis ​​de estado: loading, errore data. Desestruturamos essas variáveis ​​e as usamos para renderizar condicionalmente uma mensagem de carregamento, uma mensagem de erro ou os dados buscados.

Se loadingfor verdadeiro, renderizamos uma mensagem de carregamento simples. Se errorfor verdadeiro, renderizamos uma mensagem de erro com o texto da mensagem de erro. Se datafor verdadeiro, renderizamos os dados buscados como uma lista não ordenada.

Conclusão

Neste artigo, exploramos como implementar um useFetchgancho no React com suporte a cache usando o Axios. Esse gancho personalizado permite que você busque dados de uma API e manipule o carregamento, o erro e os estados de dados de maneira modular e reutilizável. Também mostramos como usar o useFetchgancho em um componente para buscar dados e renderizá-los condicionalmente com base no carregamento e nos estados de erro.

Com esse useFetchgancho, você pode facilmente buscar dados de uma API em seus projetos React enquanto mantém seu código organizado e fácil de manter.