fetch-hook.ts

import { useState, useEffect } from 'react';

export interface UseFetchData<TData> {
  data: TData;
  isLoading: boolean;
  error?: string;
}

export const useFetchData = <TData>(fetchUrl: string, defaultValue: TData): UseFetchData<TData> => {
  const [data, setData] = useState<TData>(defaultValue);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | undefined>(undefined);

  const fetchData = async () => {
    const setErrorMessage = (errorMessage: string) => {
      setError(errorMessage);
      setIsLoading(false);
    };

    try {
      const result = await fetch(fetchUrl);

      if (!result.ok) {
        setErrorMessage(result.statusText);

        return;
      }

      setData(await result.json());
      setIsLoading(false);
    } catch (err) {
      setErrorMessage(err.message);
    }
  };

  useEffect(() => {
    fetchData();
    // tslint:disable-next-line
  }, [fetchUrl]);

  return { data, isLoading, error };
};