useFetch — Obtención simple de datos con carga, error y refetch

import { useState, useEffect, useCallback, useRef } from "react";
 
interface UseFetchOptions<T> {
  /** Omitir la obtención inicial. Predeterminado: false */
  skip?: boolean;
  /** Transformar la respuesta antes de configurar datos */
  transform?: (data: unknown) => T;
  /** Opciones de init de fetch personalizadas (encabezados, método, etc.) */
  init?: RequestInit;
  /** Dependencias que desencadenan un refetch cuando cambian */
  deps?: unknown[];
}
 
interface UseFetchReturn<T> {
  data: T | null;
  error: Error | null;
  isLoading: boolean;
  /** Desencadenar manualmente un refetch */
  refetch: () => void;
  /** Cancelar la solicitud actual */
  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;
 
    // Cancelar cualquier solicitud en vuelo
    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") {
        // La solicitud fue cancelada, no actualizar el estado
        return;
      }
      if (mountedRef.current) {
        setError(err instanceof Error ? err : new Error(String(err)));
        setIsLoading(false);
      }
    }
  }, [url, skip, transform, init, ...deps]);
 
  // Obtener en montar y cuando cambien las dependencias
  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>Cargando...</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}>Actualizar</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>Cargando publicaciones...</p>;
 
  return (
    <ul>
      {posts?.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
 
// Omitir obtención hasta que el usuario actúe
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="Buscar..."
      />
      <button onClick={() => setSearchTerm(query)}>Buscar</button>
      {isLoading && <p>Buscando...</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" }),
  },
});

// Dentro de fetchData, envuelve en un bucle de reintento:
for (let attempt = 0; attempt < maxRetries; attempt++) {
  try {
    const response = await fetch(url, { signal: controller.signal });
    // ...manejo de éxito
    break;
  } catch (err) {
    if (attempt === maxRetries - 1) throw err;
    await new Promise((r) => setTimeout(r, 1000 * Math.pow(2, attempt)));
  }
}