use-promise

use-promise helps cache responses from network calls. Supports React.Suspense.

Installation

yarn add @react-noui/use-promise

Or with npm

npm install --save @react-noui/use-promise

Setup

// App.tsx
const AppCache = createReactCache();

function App() {
  return (
    <AppCache.Provider>
      <FetchesTodos />
    </AppCache.Provider>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

Example

This example implements FetchesTodos from the above example. Supported by React.Suspense.

import { useFetch } from '@react-noui/use-promise';

type Todo = {
  id: number;
  title: string;
  completed: boolean;
  userId: number;
}

function FetchesTodos() {
  return (
    <React.Suspense fallback={<FetchesTodosLoading />}>
      <FetchesTodosLazy />
    </React.Suspense>
  );
}

function FetchesTodosLazy() {
  const todos = useFetch('https://jsonplaceholder.typicode.com/todos');
  // Todo[]
}

function FetchesTodosLoading() {
  return <div>Loading Todos...</div>
}