useApi React Hook

useApi.ts

import React from "react";

interface Response<T> {
  data: T | null;
  isFetching: boolean;
  error: string | null;
  isSuccess: boolean;
}

export function useApi<T>(apiFunction: () => Promise<any>): [Response<T>, () => void] {
  const [response, setResponse] = React.useState<Response<T>>({
    data: null,
    isFetching: false,
    error: null,
    isSuccess: false,
  });

  const callback = React.useCallback(async () => {
    setResponse({
      data: null,
      isFetching: true,
      error: null,
      isSuccess: false,
    });

    try {
      const res = await apiFunction();
      setResponse({...response, data: res, isFetching: false, isSuccess: true});
    } catch (err) {
      setResponse({...response, isFetching: false, error: (err as Error).message});
    }
  }, [apiFunction]);

  return [response, callback];
}