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

• childrenfunction(state: Object): Node | Node Render function or React Node.

• stateobject Async state object (return value ofuseAsync()).

• persistboolean 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

conststate=useAsync(...)return (  <IfInitialstate={state}>    <p>This text is only rendered while `run` has not yet been invoked on `deferFn`.</p>  </IfInitial>)

<AsyncdeferFn={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>

<IfPending> /<Async.Pending>

This component renders only while the promise is pending (loading / unsettled).

Alias:<Async.Loading>

Props

• childrenfunction(state: Object): Node | Node Render function or React Node.

• stateobject Async state object (return value ofuseAsync()).

• initialboolean Show only on initial load (whendata isundefined).

Examples

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>

<IfFulfilled> /<Async.Fulfilled>

This component renders only when the promise is fulfilled (resolved to a value, could beundefined).

Alias:<Async.Resolved>

Props

• childrenfunction(data: any, state: Object): Node | Node Render function or React Node.

• stateobject Async state object (return value ofuseAsync()).

• persistboolean Show old data while loading new data. By default it hides as soon as a new promise starts.

Examples

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>

<IfRejected> /<Async.Rejected>

This component renders only when the promise is rejected.

Props

• childrenfunction(error: Error, state: Object): Node | Node Render function or React Node.

• stateobject Async state object (return value ofuseAsync()).

• persistboolean Show old error while loading new data. By default it hides as soon as a new promise starts.

Last updated6 years ago