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.
children
function(state: Object): Node | Node
Render function or React Node.state
object
Async state object (return value ofuseAsync()
).persist
boolean
Show 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>
children
function(state: Object): Node | Node
Render function or React Node.state
object
Async state object (return value ofuseAsync()
).initial
boolean
Show only on initial load (whendata
isundefined
).
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>
children
function(data: any, state: Object): Node | Node
Render function or React Node.state
object
Async state object (return value ofuseAsync()
).persist
boolean
Show 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.
children
function(error: Error, state: Object): Node | Node
Render function or React Node.state
object
Async state object (return value ofuseAsync()
).persist
boolean
Show old error while loading new data. By default it hides as soon as a new promise starts.
Last modified 3yr ago