HTTP React

React hooks for data fetching

Http React is a React hooks library for data fetching that's built on top of the native Fetch API.

Overview

With one hook call, you get all the information about a request that you can use to build UIs that are consistent and performant:

import useFetch from 'http-react'
 
// This is the default fetcher. If you are using fetch, you don't need one
const fetcher = (url, config) => fetch(url, config)
 
export default function App() {
  const { data, isPending, error, responseTime } = useFetch('/api/user-info', {
    refresh: '30 sec',
    fetcher
  })
 
  if (isPending) return <p>Loading</p>
 
  if (error) return <p>An error ocurred</p>
 
  return (
    <div>
      <h2>Welcome, {data.name}</h2>
      <small>Profile loaded in {responseTime} miliseconds</small>
    </div>
  )
}

It supports many features out of the box, while giving developers full control over the request configuration:

  • Server-Side Rendering
  • Server actions
  • React Native
  • Request deduplication
  • Suspense
  • Refresh
  • Retry on error
  • Pagination
  • Local mutation (Optimistic UI)
  • GraphQL

and more!

Getting started