Installation

NPM

yarn add @rest-hooks/react @rest-hooks/test @rest-hooks/hooks @rest-hooks/rest

Yarn

npm install --save @rest-hooks/react @rest-hooks/test @rest-hooks/hooks @rest-hooks/rest

TypeScript is optional, but requires at least version 3.7 and strictNullChecks for full type enforcement.

Add provider at top-level component

React Web 16+

index.tsx

import { CacheProvider } from '@rest-hooks/react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <CacheProvider>
    <App />
  </CacheProvider>,
  document.body,
);

React Web 18+

index.tsx

import { CacheProvider } from '@rest-hooks/react';
import ReactDOM from 'react-dom';

ReactDOM.createRoot(document.body).render(
  <CacheProvider>
    <App />
  </CacheProvider>,
);

React Native

index.tsx

import { CacheProvider } from '@rest-hooks/react';
import { AppRegistry } from 'react-native';

const Root = () => (
  <CacheProvider>
    <App />
  </CacheProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);

NextJS

npm install --save @rest-hooks/ssr @rest-hooks/redux redux

pages/_document.tsx

import { RestHooksDocument } from '@rest-hooks/ssr/nextjs';

export default RestHooksDocument;

pages/_app.tsx

import { AppCacheProvider } from '@rest-hooks/ssr/nextjs';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <AppCacheProvider>
      <Component {...pageProps} />
    </AppCacheProvider>
  );
}

Full NextJS Guide

Alternatively integrate state with redux

Older browser support

If your application targets older browsers (a few years or more), be sure to load polyfills. Typically this is done with @babel/preset-env useBuiltIns: 'entry', coupled with importing core-js at the entrypoint of your application.

This ensures only the needed polyfills for your browser support targets are included in your application bundle.

For instance TypeError: Object.hasOwn is not a function

Internet Explorer support

If you see Uncaught TypeError: Class constructor Resource cannot be invoked without 'new', follow the instructions to add legacy browser support to packages

Example

Explore more Rest Hooks demos