React hook and fetch example code.

App.tsx

import React, { useCallback, useEffect, useState } from "react";
import axios, { AxiosRequestConfig } from "axios";

class FetchError extends Error {
  constructor({ name, message }: { name: string, message: string }) {
    super(message);
    this.name = name;
  }
}

function useFetch<T>(url: string, config: AxiosRequestConfig) {
  const [data, setData] = useState<T>();
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<FetchError>();

  const fetch = useCallback(async () => {
    axios(url, config)
      .then((res) => setData(res.data))
      .catch(e => {
        if (e.response.data?.error) {
          return setError(new FetchError({ ...e.response.data.error }));
        }
        return setError(e);
      })
      .finally(() => setLoading(false));
  }, [url, config]);

  const refetch = useCallback(() => {
    setLoading(true);
    fetch();
  }, [fetch]);

  useEffect(() => {
    fetch();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return { data, loading, error, refetch };
}

type User = {
  name: string;
}

function App() {
  const { data, loading, error, refetch } = useFetch<User>("http://localhost:3000/name", {
    method: "get",
    params: { name: "bbb" },
  });

  if (loading) return <div>loading...</div>;
  if (error) return <div style={{color: "red"}}>{error.message}</div>;

  return (
    <div>
      <div>{data?.name}</div>
      <button onClick={refetch}>Reload</button>
    </div>
  );
}

export default App;