Como criar um hook para fazer requisições, usar loading e tratar erros no React

Olá devs
Para evitar o uso excessivo de useState, facilitar o tratamento de erros e utilizar loading no react eu utilizo esse hook

import { useEffect, useState } from 'react';
import { api } from '../axios';

export function useFetch<T = unknown>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [isFetching, setIsFetching] = useState(true);
  const [error, setError] = useState<Error | null>(null);
  useEffect(() => {
    api
      .get(url)
      .then((res) => {
        setData(res.data);
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setIsFetching(false);
      });
  }, []);

  return { data, error, isFetching };
}

para utilizar esse hook é muito simples, basta importar o hook e passar uma url

const url = "https://pokeapi.co/api/v2/pokemon/ditto"
const {data, isFetching, error} = useFetch(url)

Utilizando o data você tem acesso a resposta de requisição, ou seja todos os dados da requisição feita. O isFetching permanesse como true ate que a requisição seja feita, podendo assim, utilizar essa validação para colocar um loading na sua aplicação, ate que a requisição termine. E por último se sua request der um erro, esse state (error) será true, podendo assim fazer também a validação desse caso.

Como descrito no começo do artigo a vantagem de usar esse hook é não precisar criar varios states em cada component da sua aplicação, além de facilitar a sua vida esse hook deixa seu código mais limpo.