v2.2.0

Fixes

• fix: change the task function to handle only Async task
• fix: change TaskRunner to propagate errors to the higher level

v2.1.5

Fixes

• fix(use-suspense-render): change the issue that does not render if the defaultData value is falsy
• fix(use-suspense-render): change the return value of taskRunner
• fix(taskRunnerInterceptors): fix a bug where taskRunnerInterceptor did not change to PENDING status during task processing

v2.1.4

Fixes

• fix(taskRunnerInterceptors): fix a bug where taskRunnerInterceptor did not change to PENDING status during task processing

v2.1.3

Fixes

• fix(taskRunnerInterceptors): change to allow multiple interceptors
• fix: update the return type of suspenseRender

Docs

• docs(README.md): add the taskRunnerInterceptors section
• docs(README.md): udpate the SuspenseRenderProvider section

v2.0.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 App = () => {
  // Asynchronous task function
  const asyncTask = useCallback(
    () =>
      new Promise<string>((resolve) => {
        const randomString = Math.random().toString(32).slice(2);
        setTimeout(() => resolve(randomString), 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<string, Error>();

  useEffect(() => {
    // Run asynchronous task function
    runAsyncTask(async () => {
      return asyncTask();
    });
  }, [asyncTask]);

  const handleButtonClick = useCallback(() => {
    // Run the `asyncTask` function
    runAsyncTask(async () => {
      return 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(
    (data) => (
      <div>
        <p>Success({data})</p>
        <button type="button" onClick={handleButtonClick}>
          Update
        </button>
      </div>
    ),
    <p>Loading..</p>,
    (error) => <p>Error, Oops something went wrong.. :(, ({error.message})</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

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

v1.0.1

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 Starts

useSuspenseRender

By using the useSuspenseRender hook, you can declaratively define which components will be displayed based on the asynchronous data processing status within the component.
Inside the component, you can comprehensively handle the components to be rendered based on the data processing status.

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

const DataComponent = () => {
  // Asynchronous data processing function
  const fetcher = useCallback(
    async () => new Promise((resolve) => {
      setTimeout(resolve, 1000);
    }
  ), []);

  // Pass the `fetcher` function as an argument to the `useSuspenseRender` function and call it.
  // When you pass an asynchronous data processing function(=fetcher) 
  // to the `useSuspenseRender` hook, it returns a `suspenseRender` function.
  const [ suspenseRender ] = useSuspenseRender(fetcher);

  // Define rendering for each data processing status using the `suspenseRender` function.
  // The `suspenseRender` function allows you to define the components that will be displayed 
  // when data processing is successful, while data processing is ongoing, and when data processing fails. 
  // While the fetcher function passed as an argument to the `useSuspenseRender` function is running, 
  // `suspenseRender` automatically renders the screen based on the data processing status.
  return suspenseRender(
    <p>Success</p>,
    <p>Loading..</p>,
    <p>Error, Oops somethins wrong.. :(</p>,
  );
}

SuspenseRenderProvider

By using the SuspenseRenderProvider, you can predefine the screen that will be displayed when data is being processed or when data processing fails, from outside the component.

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(fetcher);

  // If you do not define the components to be displayed during data processing or when data processing fails, 
  // the components defined in the parent component (i.e., SuspenseRenderProvider) will be displayed.
  return suspenseRender(
    <p>Success</p>
  );
}