Fetch Component

Example Usage

const { data, error, isLoading } = useFetch<FetchResult<object | any>>(
    `https://jsonplaceholder.typicode.com/todos/1`
  );

useEffect(() => {
    console.log(data, error, isLoading);
  }, [data, error, isLoading]);

useFetch.ts

import { useEffect, useState } from "react";

export interface FetchResult<T> {
  data: T | null;
  error: Error | null;
  isLoading: boolean;
}

export function useFetch<T>(url: string): FetchResult<T> {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json: T = await response.json();
        setData(json);
      } catch (e: any) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, error, isLoading };
}