useAPI.ts

// Well, that's version that takes fetch function, and does not create it from passed params

enum FetchState {
  Failed,
  Ok,
  AliensAteIt,
  ProxyFailed,
  DoneNuthing,
  Looding,
  Whoops
}

function useApi<T>({ callback }: { callback: () => Promise<Response> }) {
  const [fetchState, setFetchState] = React.useState<FetchState>(
    FetchState.DoneNuthing
  );
  const [data, setData] = React.useState<T | null>(null);

  React.useEffect(() => {
    const meh = async function() {
      setFetchState(FetchState.Looding);
      try {
        const response = await callback();
        if (!response.ok) {
          setFetchState(FetchState.Whoops);
        } else {
          const data = (await response.json()) as T;
          setData(data);
          setFetchState(FetchState.Ok);
        }
      } catch (_) {
        // some logic
        setFetchState(FetchState.AliensAteIt);
      }
    };
  }, [callback]);
  return [data, fetchState];
}