Hook for handling data fetch with loading and state, error handling and mocking data

useFetchData.ts

import { useState, useEffect } from 'react';

const useFetchData = <T extends Record<string, unknown>>(
  url: string,
  options?: RequestInit,
  mockData?: Promise<T>,
  timeout = 600
) => {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const abortController = new AbortController();
    const { signal } = abortController;

    const doFetch = async () => {
      setLoading(true);

      if (mockData) {
        try {
          await sleep(timeout);
          const mockDataTyped = (await mockData) as T;
          setData(mockDataTyped);
        } catch (e) {
          const err = e as Error;
          if (!signal.aborted) {
            setError(err);
          }
        } finally {
          setLoading(false);
        }

        return;
      }

      try {
        const res = await fetch(url, options);
        const json = (await res.json()) as T;
        if (!signal.aborted) {
          setData(json);
        }
      } catch (e) {
        const err = e as Error;
        if (!signal.aborted) {
          setError(err);
        }
      } finally {
        if (!signal.aborted) {
          setLoading(false);
        }
      }
    };
    doFetch();
    return () => {
      abortController.abort();
    };
  }, [options, url, mockData, timeout]);

  return { data, error, loading };
};
export default useFetchData;