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