use-fetch-pro

useFetchPro

A powerful and lightweight custom React hook for data fetching. It extends the native Fetch API with out-of-the-box support for request cancellation, caching, and retry logic.

Features

• State Management: Handles loading, data, and error states automatically.
• Retry Logic: Automatically retries failed requests.
• Cancellation: Cancels pending requests on component unmount or when dependencies change.
• Caching: In-memory caching to prevent redundant API calls.
• Manual Refetch: A refetch function to trigger requests manually.

Installation

npm install use-fetch-pro

Usage

import React from 'react';
import { useFetchPro } from 'use-fetch-pro';

interface Post {
  id: number;
  title: string;
  body: string;
}

const MyComponent = () => {
  const { data, loading, error, refetch } = useFetchPro<Post[]>(
    'https://jsonplaceholder.typicode.com/posts',
    {
      cache: true,      // Enable caching
      retry: 3,         // Retry up to 3 times on failure
      retryDelay: 1000, // Wait 1 second between retries
    }
  );

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

  return (
    <div>
      <button onClick={refetch}>Refetch Posts</button>
      <ul>
        {data?.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;

API

useFetchPro<T>(url, options)

Parameters

• url (string): The URL to fetch data from.
• options (object, optional): Configuration for the fetch request.

Options

Option	Type	Default	Description
method	string	'GET'	HTTP request method.
headers	object	undefined	Request headers.
body	BodyInit	undefined	Request body.
retry	number	0	Number of times to retry on failure.
retryDelay	number	1000	Delay in milliseconds between retries.
cache	boolean	false	If true, caches the response in memory.
cacheTime	number	300000	Cache duration in milliseconds (5 minutes).

Return Value

An object containing:

Property	Type	Description
data	T | null	The fetched data, or null if not yet fetched.
error	Error | null	An error object if the request fails, else null.
loading	boolean	true while the request is in progress.
refetch	() => void	A function to manually trigger the fetch request.

License

ISC