Helper components
React Async provides several helper components that make your JSX more declarative and less cluttered. They don't have to be direct children of
<Async> and you can use the same component several times.Renders only while the deferred promise is still waiting to be run, or you have not provided any promise.
childrenfunction(state: Object): Node | NodeRender function or React Node.stateobjectAsync state object (return value ofuseAsync()).persistbooleanShow until we have data, even while loading or when an error occurred. By default it hides as soonas the promise starts loading.
const state = useAsync(...)
return (
<IfInitial state={state}>
<p>This text is only rendered while `run` has not yet been invoked on `deferFn`.</p>
</IfInitial>
)
<Async deferFn={deferFn}>
<Async.Initial>
<p>This text is only rendered while `run` has not yet been invoked on `deferFn`.</p>
</Async.Initial>
</Async>
<Async.Initial persist>
{({ error, isPending, run }) => (
<div>
<p>This text is only rendered while the promise has not fulfilled yet.</p>
<button onClick={run} disabled={!isPending}>
Run
</button>
{error && <p>{error.message}</p>}
</div>
)}
</Async.Initial>
This component renders only while the promise is pending (loading / unsettled).
Alias:
<Async.Loading>childrenfunction(state: Object): Node | NodeRender function or React Node.stateobjectAsync state object (return value ofuseAsync()).initialbooleanShow only on initial load (whendataisundefined).
const state = useAsync(...)
return (
<IfPending state={state}>
<p>This text is only rendered while performing the initial load.</p>
</IfPending>
)
<Async.Pending initial>
<p>This text is only rendered while performing the initial load.</p>
</Async.Pending>
<Async.Pending>{({ startedAt }) => `Loading since ${startedAt.toISOString()}`}</Async.Pending>
This component renders only when the promise is fulfilled (resolved to a value, could be
undefined).Alias:
<Async.Resolved>childrenfunction(data: any, state: Object): Node | NodeRender function or React Node.stateobjectAsync state object (return value ofuseAsync()).persistbooleanShow old data while loading new data. By default it hides as soon as a new promise starts.
const state = useAsync(...)
return (
<IfFulfilled state={state}>
{data => <pre>{JSON.stringify(data)}</pre>}
</IfFulfilled>
)
<Async.Fulfilled persist>{data => <pre>{JSON.stringify(data)}</pre>}</Async.Fulfilled>
<Async.Fulfilled>
{(data, { finishedAt }) => `Last updated ${finishedAt.toISOString()}`}
</Async.Fulfilled>
This component renders only when the promise is rejected.
childrenfunction(error: Error, state: Object): Node | NodeRender function or React Node.stateobjectAsync state object (return value ofuseAsync()).persistbooleanShow old error while loading new data. By default it hides as soon as a new promise starts.
Last modified 3yr ago