⏱ async

!lint status
!format status
!format status
!GitHub
!GitHub issues
!GitHub contributors
!GitHub last commit
!npm

A tiny asynchronous effect library for React.

Installation

Just run yarn add @rishiosaur/async or npm i @rishiosaur/async (whichever floats your boat) to grab the latest version.

Usage

async comes with two kinds of hooks: usePromiseEffect and useAsyncEffect. Note: most implementations of promise/asynchronous effects are largely the same—this one just happens to be a little bit faster and has some great types.

$3

This hook returns an array of [value, loading, error]; the main hook passed to it must return some Promise.

All error handling and internal state management is done for you; all you have to do is write the promise resolution logic!

Basic Example:

``typescript
const App = () => {
const [value, loading, err] = usePromiseEffect(() =>
fetch('https://jsonplaceholder.typicode.com/todos/1').then((response) =>
response.json()
)
);

return (
<>



{!loading
? err
? JSON.stringify(err, null, 2)
: JSON.stringify(value, null, 2)
: 'Loading'}




);
};
`

$3

This is much like usePromiseEffect, but it's much more like React's internal useEffect than anything:

Basic example:

`typescript
function App() {
const [state, setState] = useState();

useAsyncEffect(async () => {
const data = await fetch(
https://jsonplaceholder.typicode.com/posts/50
).then((res) => res.json());

setState(data);
});

return (
<>


{JSON.stringify(state, null, 2)}



);
}
`

---

Notes about usage

Unlike React's useEffect, both hooks come with dependency array defaults; you just need to supply the hooks.

useAsyncEffect` also has settings for cleanup functions & mounted states.