sbrichardson / rest-hooks

Delightful data fetching for React.

Home Page:

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

๐Ÿ›Œ๐ŸŽฃ Rest hooks

CircleCI Coverage Status npm downloads bundle size npm version PRs Welcome Chat

Asynchronous dynamic data at scale. Performance, data integrity, and typing for REST, proto, GraphQL, websockets and more.

๐ŸŒŽ Website

Simple TypeScript definition

class ArticleResource extends Resource {
  readonly id: string = '';
  readonly title: string = '';
  readonly body: string = '';

  pk() {
  static urlRoot = '/articles/';

One line data hookup

const article = useSuspense(ArticleResource.detail(), { id });
return (


const { fetch } = useController();
return (
    onSubmit={data => fetch(ArticleResource.update(), { id }, data)}

And subscriptions

const price = useSuspense(PriceResource.detail(), { symbol });
useSubscription(PriceResource.detail(), { symbol });
return price.value;

...all typed ...and consistent

For the small price of 8kb gziped.    ๐ŸGet started now


Principals of Rest Hooks

TS Integrity

  • Strong inferred types
  • Global referential equality guarantees
  • Normalized store creates a single source of truth
  • Strong invariants robust against race conditions
  • Validation


  • Stale While Revalidate configurable cache
  • Only re-render

Composition over configuration

  • Declarative data definitions
  • Decoupled API definitions from usage
  • Co-located data dependencies
    • Centralized orchestration
  • Extensible orchestration through Managers (middleware)
  • Composable hooks
    • subject pattern
  • Suspense + concurrent mode async orchestration

Incremental Adoption

  • Simple case is simple
  • Scale as your app scales

Special thanks

Thanks to @0xcaff, @melissafzhang and @alexiswolfish for their valuable feedback.


Delightful data fetching for React.


Language:TypeScript 84.1%Language:JavaScript 14.9%Language:CSS 1.0%Language:Dockerfile 0.0%