React Async provides several ways to use it. The classic interface is through the <Async> component, which is backwards compatible to React v16.3. More recent React applications will be using hooks, of which two are provided: useAsync and useFetch. Functionally, <Async> and useAsync are equivalent. useFetch is a special version of useAsync which is tied to the native fetch API.

React Async accepts a wide range of configuration options and returns a set of state props. The way you use these differs slightly between the useAsync and useFetch hooks, and the <Async> component.

Async component

<Async {...options}>{state => ...}</Async>

• ​options Configuration options

• ​state State object

We recommend that you pass the options individually, rather than using JSX spread attributes. React Async uses render props to return its state back to you, so it can be used by other components further down the tree.

useAsync hook

const state = useAsync(options)

• ​state State object

• ​options Configuration options

We recommend that you pass options as an inline object literal, and that you destructure the state object to extract the properties you need, unless you have multiple instances in the same component.

useFetch hook

const state = useFetch(resource, init, options)

• ​state State object

• ​resource The resource you want to fetch

• ​init Custom request options

• ​options Configuration options

createInstance

Besides using the Async component directly, you can also create your own instance of it. This allows you to preload it with options, e.g. to enable global error handling.

const CustomAsync = createInstance(defaultOptions, displayName)

• ​defaultOptions Default configuration options

• displayName Name for this instance, used by React DevTools