Create a suspending hook from an async function, an async generator or a function that returns an async iterator.
npm install @postinumero/use-asyncCreate a suspending hook from an async function, an async generator or a function that returns an async iterator.
- Server-side rendering
- recall function for re-executing the function and rerendering related components from anywhere
``js
import { Suspense } from "react";
import { create } from "@postinumero/use-async";
import axios from "axios";
const [useAxios] = create(axios);
function Todo({ id }) {
const { data } = useAxios(https://jsonplaceholder.typicode.com/todos/${id});
return
{JSON.stringify(data, null, 2)};function App() {
return (
);
}
`
`js
import { Suspense } from "react";
import { create } from "@postinumero/use-async";
import { Repeater } from "@repeaterjs/repeater";
const [useTimestamp] = create(
() =>
new Repeater(async (push, stop) => {
push(Date.now());
const interval = setInterval(() => push(Date.now()), 1000);
await stop;
clearInterval(interval);
})
);
function Timestamp() {
return
function App() {
return (
);
}
`
For creating shortcut functions of the rest of the API, without needing to pass fn and config each time.
#### Params
- fn: AsyncFunctionconfig
- : Config (optional)
#### Returns
An array of functions [useAsync, recall, useAsyncSafe]. Each of the returned function take just the ...args as its arguments.
#### Params
- fn: AsyncFunctionconfig
- : Config (optional)args: arguments[]
- for fn (optional)
#### Returns
Resolved value of fn(...args).
#### Throws
A thrown exception from fn or a promise for React Suspense.
#### Params
- fn: AsyncFunctionconfig
- : Config (optional)args: arguments[]
- for fn (optional)
#### Returns
An array [error, value], where error is either null or a thrown exception from fn(...args), and value is resolved value of fn(...args).
#### Throws
Promise for React Suspense.
If there are components currently mounted using any of the hooks and the same arguments (fn, config, args), fn(...args) gets called. When fn resolves, components will rerender with the new value.
#### Params
- fn: AsyncFunctionconfig
- : Config (optional)args: arguments[]
- for fn (optional)
#### Returns
Resolves with undefined, when fn(...args) resolves.
| Prop | Example | Default value | Description |
| ---- | --------- | ------------- | -------------------------------------------------------------------- |
| id | "axios" | undefined | Cache values using id as key instead of fn. Required in SSR. |
1. Use createSSRCache to get SSRCacheProvider and ssrData
2. Wrawp server-side with react-ssr-prepass
3. Use to handle suspensessrData()
4. Get initial SSR data using . ssrData accepts a map function, which is called for each data entry with 2 arguments: data, { id, args }.
5. Place the data in a ${app}`
)
);
Import from @postinumero/use-async/loading-state to use the { isLoading, data, error } style API. Example:
`js
import { create } from "@postinumero/use-async/loading-state";
import axios from "axios";
const [, , useAxiosSafe] = create(axios);
function User({ id }) {
const { isLoading, data, error } = useAxiosSafe(/api/users/${id});
if (isLoading) {
return "Loading...";
}
return