https://github.com/lxsmnsyc/react-async-fc
Write asynchronous functional components in React
https://github.com/lxsmnsyc/react-async-fc
react react-async-component react-suspense
Last synced: 2 months ago
JSON representation
Write asynchronous functional components in React
- Host: GitHub
- URL: https://github.com/lxsmnsyc/react-async-fc
- Owner: lxsmnsyc
- License: mit
- Created: 2020-04-14T12:57:09.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T17:04:46.000Z (over 2 years ago)
- Last Synced: 2025-02-12T22:36:07.457Z (4 months ago)
- Topics: react, react-async-component, react-suspense
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-async-fc-demo-tuhv5
- Size: 542 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @lxsmnsyc/react-async-fc
> Write asynchronous functional components in React
[](https://www.npmjs.com/package/@lxsmnsyc/react-async-fc) [](https://standardjs.com)
## Install
```bash
npm install --save @lxsmnsyc/react-async-fc
```
```bash
yarn add @lxsmnsyc/react-async-fc
```
## Usage
### the `asyncFC` function
The library exports a single function called `asyncFC` which wraps your asynchronous functional component.
```tsx
import asyncFC from '@lxsmnsyc/react-async-fc';
```
The function will accept to values:
- the render function. This function accepts two parameters: the `props` and the `subscription`. The `subscription` allows you to manage the lifecycle of the component.
- the options object. This object requires a function called `dependencies` which declares when should the component re-render itself. There are optional properties: `suspense` is a boolean property which tells if the component should use `React.Suspense` internally or not. `defaultFallback` is a node which is used as a render fallback while the component is rendering.
The function returns a React component with additional `fallback` property which is used as a render fallback while the Promised component is resolving.
### Example
```tsx
import asyncFC from '@lxsmnsyc/react-async-fc';
const Sleeping = asyncFC(
async ({ duration }, subscription) => {
/**
* Create a Promise timeout that resolves
* once the timeout ends.
*/
await new Promise((res) => {
const timeout = setTimeout(res, duration, true)
/**
* Once the subscription is cancelled, we perform
* the cleanup for the timeout instance.
*
* This subscription instance is always cancelled when
* the dependencies changes.
*/
subscription.addListener(() => {
clearTimeout(timeout);
});
});
/**
* Timeout is expired, render the elements.
*/
return
Woke up!
;
}, {
/**
* Only re-render the component when the duration changes.
*/
dependencies: ({ duration }) => [duration],
/**
* Use Suspense for data fetching internally.
*/
suspense: true,
},
);
Sleeping for {(state / 1000).toFixed(2)} seconds.}
/>
```
### Subscription
Render functions receives a second parameter called `subscription` which is an instance of the `Subscription` class. The `subscription` allows us to manage the lifecycle of the resolving Promised component. This value has 4 methods:
- `cancel` prompts the subscription to fire all registered callbacks. This is automatically fired when the component updates/unmounts while the component is trying to resolve.
- `addListener`/`removeListener` allows us to register/unregister callbacks when the `subscription` is cancelled.
- `isCancelled` is a getter method which checks if the subscription has been cancelled.
Although the `Subscription` may manage the component lifecycle, it may or may not stop the Promise from resolving.
### Downsides
The components cannot use React hooks.
## License
MIT © [lxsmnsyc](https://github.com/lxsmnsyc)