Custom React Hook for fetching data using TypeScript.

custom_react_hook_fetching_data_typescript.md

Custom React Hook for fetching data - useFetch

Custom React hook for fetching data using TypeScript.

Tags

react, typescript, hooks, mit-license

Code

import { useState, useEffect } from "react";

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url);
        if (!res.ok) throw new Error(`Error: ${res.status}`);
        const json = await res.json();
        setData(json);
      } catch (err: any) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

MIT (c) Rich Lewis

---