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.

<IfInitial> / <Async.Initial>

Renders only while the deferred promise is still waiting to be run, or you have not provided any promise.

Props

  • children function(state: Object): Node | Node Render function or React Node.
  • state object Async state object (return value of useAsync()).
  • persist boolean Show until we have data, even while loading or when an error occurred. By default it hides as soon
    as the promise starts loading.

Examples

1
const state = useAsync(...)
2
return (
3
<IfInitial state={state}>
4
<p>This text is only rendered while `run` has not yet been invoked on `deferFn`.</p>
5
</IfInitial>
6
)
Copied!
1
<Async deferFn={deferFn}>
2
<Async.Initial>
3
<p>This text is only rendered while `run` has not yet been invoked on `deferFn`.</p>
4
</Async.Initial>
5
</Async>
Copied!
1
<Async.Initial persist>
2
{({ error, isPending, run }) => (
3
<div>
4
<p>This text is only rendered while the promise has not fulfilled yet.</p>
5
<button onClick={run} disabled={!isPending}>
6
Run
7
</button>
8
{error && <p>{error.message}</p>}
9
</div>
10
)}
11
</Async.Initial>
Copied!

<IfPending> / <Async.Pending>

This component renders only while the promise is pending (loading / unsettled).
Alias: <Async.Loading>

Props

  • children function(state: Object): Node | Node Render function or React Node.
  • state object Async state object (return value of useAsync()).
  • initial boolean Show only on initial load (when data is undefined).

Examples

1
const state = useAsync(...)
2
return (
3
<IfPending state={state}>
4
<p>This text is only rendered while performing the initial load.</p>
5
</IfPending>
6
)
Copied!
1
<Async.Pending initial>
2
<p>This text is only rendered while performing the initial load.</p>
3
</Async.Pending>
Copied!
1
<Async.Pending>{({ startedAt }) => `Loading since ${startedAt.toISOString()}`}</Async.Pending>
Copied!

<IfFulfilled> / <Async.Fulfilled>

This component renders only when the promise is fulfilled (resolved to a value, could be undefined).
Alias: <Async.Resolved>

Props

  • children function(data: any, state: Object): Node | Node Render function or React Node.
  • state object Async state object (return value of useAsync()).
  • persist boolean Show old data while loading new data. By default it hides as soon as a new promise starts.

Examples

1
const state = useAsync(...)
2
return (
3
<IfFulfilled state={state}>
4
{data => <pre>{JSON.stringify(data)}</pre>}
5
</IfFulfilled>
6
)
Copied!
1
<Async.Fulfilled persist>{data => <pre>{JSON.stringify(data)}</pre>}</Async.Fulfilled>
Copied!
1
<Async.Fulfilled>
2
{(data, { finishedAt }) => `Last updated ${finishedAt.toISOString()}`}
3
</Async.Fulfilled>
Copied!

<IfRejected> / <Async.Rejected>

This component renders only when the promise is rejected.

Props

  • children function(error: Error, state: Object): Node | Node Render function or React Node.
  • state object Async state object (return value of useAsync()).
  • persist boolean Show old error while loading new data. By default it hides as soon as a new promise starts.
Last modified 2yr ago