v1.1.0

React Suspense Render Hook

React Suspense Render Hook: This hook allows you to declaratively define components that render when asynchronous data is processed.

Installation

The easiest way to install react-suspense-render-hook is with npm.

npm install react-suspense-render-hook

Alternately, download the source.

git clone https://github.com/stegano/react-suspense-render-hook.git

Quick Start

useSuspenseRender

The useSuspenseRender hook enables a declarative approach to display components based on asynchronous data processing status. Handle components' rendering based on data processing status within a single component.

import { useState, useCallback } from "react";
import { useSuspenseRender } from "react-suspense-render-hook";

const DataComponent = () => {
  const [data, setData] = useState("NONE");
  
  // Asynchronous task function
  const asyncTask = useCallback(
    async () =>
      new Promise((resolve) => {
        const randomString = Math.random().toString(32).slice(2);
        setData(randomString);
        setTimeout(resolve, 1000 * 3);
      }),
    [],
  );

  // You can use the `runAsyncTask` function to process asynchronous data again at your desired point after the screen has been rendered.
  const [suspenseRender, runAsyncTask] = useSuspenseRender(asyncTask);

  const handleButtonClick = useCallback(() => {
    // Run the `asyncTask` function
    runAsyncTask(asyncTask); // Alternatively, you can use `runASyncTask(new Promise(...))`;
  }, [asyncTask, runAsyncTask]);

  // Use `suspenseRender` to define rendering for data processing statuses: success, loading, or error. It auto-renders based on the `asyncTask` function's status.
  return suspenseRender(
    <div>
      <p>Success({data})</p>
      <button type="button" onClick={handleButtonClick}>
        Update
      </button>
    </div>,
    <p>Loading..</p>,
    <p>Error, Oops somethins wrong.. :(</p>,
  );
};

Demo: https://stackblitz.com/edit/stackblitz-starters-pgefl6

SuspenseRenderProvider

The SuspenseRenderProvider allows for predefined loading or error components to be set externally.

import { SuspenseRenderProvider, useSuspenseRender } from "react-suspense-render-hook";

const App = ({ children }) => {
  return (
    <SuspenseRenderProvider loading={<p>Loading..</p>} error={<p>Error!</p>}>
      <DataComponent />
    </SuspenseRenderProvider>
  )
}

// ...

const DataComponent = () => {
  const [ suspenseRender ] = useSuspenseRender(asyncTask);
  // If not specified, components defined in `SuspenseRenderProvider` are used for `loading` or `error`.
  return suspenseRender(
    <p>Success</p>
  );
}

Demo: https://stackblitz.com/edit/stackblitz-starters-bwapyp