reactjs

Asynchronous dynamic data at scale for React

Oct 12, 2021
Asynchronous dynamic data at scale for React

rest-hooks

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

View Demo View Github

Simple TypeScript definition

class ArticleResource extends Resource { readonly id: string = ''; readonly title: string = ''; readonly body: string = ''; pk() { return this.id; } static urlRoot = '/articles/'; }

One line data hookup

const article = useResource(ArticleResource.detail(), { id }); return ( <> <h2>{article.title}</h2> <p>{article.body}</p> </> );

Mutation

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

And subscriptions

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

...all typed ...fast ...and consistent

For the small price of 8kb gziped.    🏁Get started now

Features

Principals of Rest Hooks

Integrity

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

Performance

  • 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
Recommended