1import useFetch from "@repo/ui/hooks/use-fetch";

1const { data, loading, error } = useFetch<User[]>('/api/users');
2
3if (loading) return <p>Loading...</p>;
4if (error) return <p>Error: {error.message}</p>;
5
6return <ul>{data?.map(user => <li key={user.id}>{user.name}</li>)}</ul>;

1import { useState, useEffect } from "react";
2
3function useFetch<T>(url: string) {
4  const [data, setData] = useState<T | null>(null);
5  const [loading, setLoading] = useState(true);
6  const [error, setError] = useState<Error | null>(null);
7
8  useEffect(() => {
9    const fetchData = async () => {
10      setLoading(true);
11      try {
12        const response = await fetch(url);
13        const result = await response.json();
14        setData(result);
15      } catch (err) {
16        setError(err as Error);
17      } finally {
18        setLoading(false);
19      }
20    };
21
22    fetchData();
23  }, [url]);
24
25  return { data, loading, error };
26}
27
28export default useFetch;