Helper components

Search…

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.