useFetch — Simple data fetching with loading, error, and refetch

import { useState, useEffect, useCallback, useRef } from "react";
 
interface UseFetchOptions<T> {
  /** Skip the initial fetch. Default: false */
  skip?: boolean;
  /** Transform the response before setting data */
  transform?: (data: unknown) => T;
  /** Custom fetch init options (headers, method, etc.) */
  init?: RequestInit;
  /** Dependencies that trigger a refetch when changed */
  deps?: unknown[];
}
 
interface UseFetchReturn<T> {
  data: T | null;
  error: Error | null;
  isLoading: boolean;
  /** Manually trigger a refetch */
  refetch: () => void;
  /** Abort the current request */
  abort: () => void;
}
 
function useFetch<T = unknown>(
  url: string | null,
  options: UseFetchOptions<T> = {}
): UseFetchReturn<T> {
  const { skip = false, transform, init, deps = [] } = options;
 
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const [isLoading, setIsLoading] = useState(!skip && url !== null);
  const abortControllerRef = useRef<AbortController | null>(null);
  const mountedRef = useRef(true);
 
  const fetchData = useCallback(async () => {
    if (!url || skip) return;
 
    // Abort any in-flight request
    abortControllerRef.current?.abort();
    const controller = new AbortController();
    abortControllerRef.current = controller;
 
    setIsLoading(true);
    setError(null);
 
    try {
      const response = await fetch(url, {
        ...init,
        signal: controller.signal,
      });
 
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
 
      const json = await response.json();
      const result = transform ? transform(json) : (json as T);
 
      if (mountedRef.current && !controller.signal.aborted) {
        setData(result);
        setIsLoading(false);
      }
    } catch (err) {
      if (err instanceof DOMException && err.name === "AbortError") {
        // Request was aborted, do not update state
        return;
      }
      if (mountedRef.current) {
        setError(err instanceof Error ? err : new Error(String(err)));
        setIsLoading(false);
      }
    }
  }, [url, skip, transform, init, ...deps]);
 
  // Fetch on mount and when dependencies change
  useEffect(() => {
    mountedRef.current = true;
    fetchData();
 
    return () => {
      mountedRef.current = false;
      abortControllerRef.current?.abort();
    };
  }, [fetchData]);
 
  const abort = useCallback(() => {
    abortControllerRef.current?.abort();
    setIsLoading(false);
  }, []);
 
  return { data, error, isLoading, refetch: fetchData, abort };
}

"use client";
 
interface User {
  id: number;
  name: string;
  email: string;
}
 
function UserProfile({ userId }: { userId: number }) {
  const { data, error, isLoading, refetch } = useFetch<User>(
    `https://jsonplaceholder.typicode.com/users/${userId}`,
    { deps: [userId] }
  );
 
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!data) return null;
 
  return (
    <div>
      <h2>{data.name}</h2>
      <p>{data.email}</p>
      <button onClick={refetch}>Refresh</button>
    </div>
  );
}
 
function PostList() {
  const { data: posts, isLoading } = useFetch<
    Array<{ id: number; title: string }>
  >("https://jsonplaceholder.typicode.com/posts", {
    transform: (raw) =>
      (raw as Array<{ id: number; title: string }>).slice(0, 10),
  });
 
  if (isLoading) return <p>Loading posts...</p>;
 
  return (
    <ul>
      {posts?.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
 
// Skip fetch until user acts
function SearchResults() {
  const [query, setQuery] = useState("");
  const [searchTerm, setSearchTerm] = useState<string | null>(null);
 
  const { data, isLoading } = useFetch<{ results: string[] }>(
    searchTerm
      ? `https://api.example.com/search?q=${encodeURIComponent(searchTerm)}`
      : null
  );
 
  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <button onClick={() => setSearchTerm(query)}>Search</button>
      {isLoading && <p>Searching...</p>}
      {data?.results.map((r, i) => <p key={i}>{r}</p>)}
    </div>
  );
}

const { data, isLoading } = useFetch("/api/users", {
  init: {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Alice" }),
  },
});

// Inside fetchData, wrap in a retry loop:
for (let attempt = 0; attempt < maxRetries; attempt++) {
  try {
    const response = await fetch(url, { signal: controller.signal });
    // ...success handling
    break;
  } catch (err) {
    if (attempt === maxRetries - 1) throw err;
    await new Promise((r) => setTimeout(r, 1000 * Math.pow(2, attempt)));
  }
}