https://github.com/tonix-tuft/react-suspense-async-effect
A library to perform asynchronous effects in React following the Suspense API principles providing asynchronous curried functions with a synchronous feel.
https://github.com/tonix-tuft/react-suspense-async-effect
algebraic-effects async asynchronous curry effect effects feels-synchronous functional-programming react suspense
Last synced: about 2 months ago
JSON representation
A library to perform asynchronous effects in React following the Suspense API principles providing asynchronous curried functions with a synchronous feel.
- Host: GitHub
- URL: https://github.com/tonix-tuft/react-suspense-async-effect
- Owner: tonix-tuft
- License: mit
- Created: 2019-12-02T18:44:32.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-08T06:24:01.000Z (about 3 years ago)
- Last Synced: 2025-09-27T22:19:34.051Z (6 months ago)
- Topics: algebraic-effects, async, asynchronous, curry, effect, effects, feels-synchronous, functional-programming, react, suspense
- Language: JavaScript
- Homepage:
- Size: 6.5 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-suspense-async-effect
_Asynchronous, feels synchronous._
A library to perform asynchronous effects in React following the Suspense API principles providing asynchronous curried functions with a synchronous feel.
[](https://www.npmjs.com/package/react-suspense-async-effect)
## Installation
```bash
npm install --save react-suspense-async-effect
```
Install peer dependencies:
```bash
npm install --save react react-dom
```
## Usage
```jsx
// Example.js
import React from "react";
import { useAsyncEffect, asyncEffect } from "react-suspense-async-effect";
// Create a promise factory.
const promiseFactory = (param1, param2, param3) =>
new Promise((resolve) => {
setTimeout(resolve, 3000, { param1, param2, param3 });
});
// Preload the asynchronous effect (Render-as-you-fetch).
const preloadedAsyncEffect = asyncEffect(promiseFactory)("param1 value")(
"param2 value",
"param3 value"
);
function Example() {
// Use the asynchronous effect.
// If the asynchronous data is available at this point,
// render the component, otherwise suspend.
const [data] = useAsyncEffect(preloadedAsyncEffect);
return (
{JSON.stringify(data, void 0, 4)}
);
}
export default Example;
// App.js
import React, { Suspense } from "react";
import Example from "./Example";
function App() {
return (
);
}
export default App;
```
## License
MIT © [Anton Bagdatyev (Tonix)](https://github.com/tonix-tuft)