useFetch

network

Installation

npx usehooks-cli@latest add use-fetch

Description

A comprehensive React hook for making HTTP requests using the Fetch API with loading states, error handling, request cancellation, and convenient methods for different HTTP verbs.

Parameters

Name	Type	Default	Description
url?	string	-	The URL to fetch from
options?	UseFetchOptions	{}	Fetch options including immediate execution, callbacks, and RequestInit options

Return Type

UseFetchReturn<T>

Property	Type	Description
data	T \| null	The fetched data, null if no data or error occurred
loading	boolean	True when a request is in progress
error	Error \| null	Error object if request failed, null otherwise
execute	(url?: string, options?: RequestInit) => Promise<T \| null>	Manually execute a fetch request with optional URL and options override
abort	() => void	Abort the current request
reset	() => void	Reset the state to initial values and abort any ongoing request

Examples

Basic GET Request

Fetching data with automatic execution

const { data, loading, error } = useFetch<User[]>('/api/users', {
  immediate: true
});

if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;

return (
  <ul>
    {data?.map(user => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

Manual Execution with POST

Creating a new resource with manual execution

const { data, loading, error, execute } = useFetch<User>();

const createUser = async (userData: CreateUserData) => {
  try {
    const newUser = await execute('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(userData)
    });
    console.log('User created:', newUser);
  } catch (err) {
    console.error('Failed to create user:', err);
  }
};

return (
  <form onSubmit={(e) => {
    e.preventDefault();
    createUser(formData);
  }}>
    {/* form fields */}
    <button type="submit" disabled={loading}>
      {loading ? 'Creating...' : 'Create User'}
    </button>
  </form>
);

Request Cancellation

Cancelling requests and handling cleanup

const { data, loading, execute, abort, reset } = useFetch<SearchResults>();
const [query, setQuery] = useState('');

const searchUsers = useCallback(async (searchTerm: string) => {
  if (!searchTerm.trim()) {
    reset();
    return;
  }

  try {
    await execute(`/api/search?q=${encodeURIComponent(searchTerm)}`);
  } catch (error) {
    if (error.name !== 'AbortError') {
      console.error('Search failed:', error);
    }
  }
}, [execute, reset]);

// Debounced search
const debouncedSearch = useDebounce(query, 300);
useEffect(() => {
  searchUsers(debouncedSearch);
}, [debouncedSearch, searchUsers]);

return (
  <div>
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search users..."
    />
    <button onClick={abort}>Cancel</button>
    {loading && <div>Searching...</div>}
    {data && <SearchResultsList results={data} />}
  </div>
);

Dependencies

react

Notes

•Automatically handles JSON parsing and falls back to text for non-JSON responses
•Includes request cancellation using AbortController to prevent memory leaks
•Provides convenience hooks: useGet, usePost, usePut, useDelete
•Supports both immediate execution and manual triggering
•Includes onSuccess and onError callbacks for side effects
•Properly handles cleanup on component unmount

Implementation

"use client";

import { useState, useEffect, useCallback, useRef } from "react";

export interface UseFetchOptions extends RequestInit {
  immediate?: boolean;
  onSuccess?: (data: any) => void;
  onError?: (error: Error) => void;
}

export interface UseFetchState<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
}

export interface UseFetchReturn<T> extends UseFetchState<T> {
  execute: (url?: string, options?: RequestInit) => Promise<T | null>;
  abort: () => void;
  reset: () => void;
}

export function useFetch<T = any>(
  url?: string,
  options: UseFetchOptions = {}
): UseFetchReturn<T> {
  const [state, setState] = useState<UseFetchState<T>>({
    data: null,
    loading: false,
    error: null,
  });

  const abortControllerRef = useRef<AbortController | null>(null);
  const optionsRef = useRef(options);

  // Update options ref when options change
  useEffect(() => {
    optionsRef.current = options;
  }, [options]);

  const execute = useCallback(
    async (
      executeUrl?: string,
      executeOptions?: RequestInit
    ): Promise<T | null> => {
      const targetUrl = executeUrl || url;

      if (!targetUrl) {
        const error = new Error("No URL provided");
        setState((prev) => ({ ...prev, error, loading: false }));
        optionsRef.current.onError?.(error);
        throw error;
      }

      // Abort previous request if it exists
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }

      // Create new abort controller
      abortControllerRef.current = new AbortController();

      setState((prev) => ({ ...prev, loading: true, error: null }));

      try {
        const { immediate, onSuccess, onError, ...fetchOptions } =
          optionsRef.current;

        const response = await fetch(targetUrl, {
          ...fetchOptions,
          ...executeOptions,
          signal: abortControllerRef.current.signal,
        });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        // Try to parse as JSON, fallback to text
        let data: T;
        const contentType = response.headers.get("content-type");

        if (contentType && contentType.includes("application/json")) {
          data = await response.json();
        } else {
          data = (await response.text()) as T;
        }

        setState({ data, loading: false, error: null });
        onSuccess?.(data);
        return data;
      } catch (error) {
        const fetchError = error as Error;

        // Don't update state if request was aborted
        if (fetchError.name !== "AbortError") {
          setState((prev) => ({ ...prev, loading: false, error: fetchError }));
          optionsRef.current.onError?.(fetchError);
        }

        throw fetchError;
      }
    },
    [url]
  );

  const abort = useCallback(() => {
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
      abortControllerRef.current = null;
    }
  }, []);

  const reset = useCallback(() => {
    abort();
    setState({ data: null, loading: false, error: null });
  }, [abort]);

  // Execute immediately if immediate option is true and url is provided
  useEffect(() => {
    if (options.immediate && url) {
      execute();
    }
  }, [url, options.immediate, execute]);

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      abort();
    };
  }, [abort]);

  return {
    ...state,
    execute,
    abort,
    reset,
  };
}

// Convenience hooks for specific HTTP methods
export function useGet<T = any>(url?: string, options: UseFetchOptions = {}) {
  return useFetch<T>(url, { ...options, method: "GET" });
}

export function usePost<T = any>(url?: string, options: UseFetchOptions = {}) {
  return useFetch<T>(url, { ...options, method: "POST" });
}

export function usePut<T = any>(url?: string, options: UseFetchOptions = {}) {
  return useFetch<T>(url, { ...options, method: "PUT" });
}

export function useDelete<T = any>(
  url?: string,
  options: UseFetchOptions = {}
) {
  return useFetch<T>(url, { ...options, method: "DELETE" });
}

useUpdateEffect

CLI Docs All Hooks

useFullscreen