⚡️ HTTP React

React hooks for modern, efficient data fetching.

http-react is a powerful React hooks library that streamlines data fetching by building on top of the native Fetch API. It's designed for performance and consistency.

🚀 Effortless Data Fetching with `useFetch`

The useFetch hook simplifies and centralizes your data management, giving you everything you need for consistent, performant UIs with a single call.

Quick Start Example

Import and use the hook. It handles loading, error states, and even response timing out of the box.

import useFetch from 'http-react'
 
export default function UserProfile() {
  const { data, isPending, error, responseTime } = useFetch('/api/user-info', {
    refresh: '30 sec', // Auto-refresh the data every 30 seconds
  })
 
  // 1. Loading State
  if (isPending) return <p>Loading user profile...</p>
 
  // 2. Error State
  if (error) return <p style={{ color: 'red' }}>❌ Failed to load profile: {error.message}</p>
 
  // 3. Success State
  return (
    <div>
      <h2>👋 Welcome back, {data.name}</h2>
      <small>Data loaded in {responseTime}ms</small>
    </div>
  )
}

Note: http-react uses the native browser fetch function by default. If you need to integrate with a different library (like Axios or a custom wrapper) or use a specific configuration, you can pass a custom function via the fetcher option:

 
const customFetcher = (url, config) => axios.get(url, config) // Example using Axios
 
 
export function App() {
  const { data } = useFetch('/api/user-info', { fetcher: customFetcher })
 
  // Your JSX
}

✨ Powerful Features, Minimal Configuration

http-react supports modern web development patterns out of the box, giving you full control over every request configuration while keeping your code clean.

Core Capabilities ⚙️

Feature	Benefit for Developers	Modern Context
Request Deduplication	Automatically prevents redundant, duplicate network calls for the same key.	Performance / Caching
Refresh & Retry on Error	Configure intelligent background data updates and automatic recovery from transient network failures.	Resilience / Data Freshness
Local Mutation (Optimistic UI)	Update the UI immediately after a successful action, giving users instant feedback before the server responds.	User Experience (UX)
Pagination	Built-in utilities for fetching and managing large datasets across multiple pages or infinite scrolls.	Data Handling

Platform & Framework Support 🛠️

Feature	Benefit for Developers	Context
Server-Side Rendering (SSR)	Pre-fetch data on the server for faster initial loads and better SEO.	Next.js, etc.
React Suspense	Use React's concurrent rendering features for declarative loading states.	Modern React
React Native	Use the exact same data-fetching logic across web and mobile platforms.	Cross-Platform
Server Actions	Deep integration with modern frameworks for invoking server-side mutations directly from components.	Full-Stack Frameworks
GraphQL	Dedicated support for managing GraphQL requests alongside traditional REST endpoints.	API Flexibility