React Suspense Render Hook: This hook allows you to declaratively define components that render when asynchronous data is processed.
This library has been updated to react-render-state-hook
, allowing for more reliable use of almost all the features. Please check the link below for further information.
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
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
The SuspenseRenderProvider
allows for predefined loading or error components to be set externally.
import { useCallback, useEffect } from 'react';
import {
SuspenseRenderProvider,
useSuspenseRender,
} from 'react-suspense-render-hook';
const Component = () => {
// Asynchronous task function
const asyncTask = useCallback(
() =>
new Promise<any>((resolve) => {
setTimeout(resolve, 1000 * 1);
}),
[]
);
const [suspenseRender, runAsyncTask] = useSuspenseRender();
useEffect(() => {
runAsyncTask(async () => {
await asyncTask();
});
}, []);
// If not specified, components defined in `SuspenseRenderProvider` are used for `renderLoading` or `renderError`.
return suspenseRender(<p>Success</p>);
};
export const App = ({ children }) => {
return (
<SuspenseRenderProvider
renderLoading={<p>Loading..โ๏ธ</p>}
renderError={<p>Error!</p>}
>
<Component />
</SuspenseRenderProvider>
);
};
Demo: https://stackblitz.com/edit/stackblitz-starters-bwapyp
taskRunnerInterceptors
can intercept taskRunner
execution, allowing you to transform it. It can be useful for adding logs for data processing or injecting dummy data for use in Storybook and testing environments.
import { useCallback, useEffect } from 'react';
import {
SuspenseRenderProvider,
useSuspenseRender,
} from 'react-suspense-render-hook';
const Component = () => {
// Asynchronous task function
const asyncTask = useCallback(async () => {
// e.g., return (await axios.get('.../data.json')).data.greeting;
return 'Hi';
}, []);
const [suspenseRender, runAsyncTask] = useSuspenseRender<string>();
useEffect(() => {
runAsyncTask(async () => {
const greeting = await asyncTask();
return greeting;
}, 'greeting');
}, []);
return suspenseRender((greeting) => <p>{greeting}</p>);
};
export const App = ({ children }) => {
return (
<SuspenseRenderProvider
renderLoading={<p>Loading..โ๏ธ</p>}
renderError={<p>Error!</p>}
experimentals={{
taskRunnerInterceptors: [
async (_prevInterceptorResult, asyncTaskFunction, taskId) => {
if (taskId === 'greeting') {
return 'Hello';
}
return await asyncTaskFunction();
},
async (prevInterceptorResult, asyncTaskFunction, taskId) => {
if (taskId === 'greeting') {
// When `renderSuccess` is executed, it displays the text `Hello ๐`.
return `${prevInterceptorResult} ๐`;
}
return await asyncTaskFunction();
},
],
}}
>
<Component />
</SuspenseRenderProvider>
);
};
Demo: https://stackblitz.com/edit/stackblitz-starters-4qxzui