next
Interfaces
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 component1
<Async {...options}>{state => ...}</Async>
Copied!
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
useAsync hook1
const state = useAsync(options)
Copied!
We recommend that you passoptionsas an inline object literal, and that you destructure thestateobject to extract the properties you need, unless you have multiple instances in the same component.
useFetch hook
useFetch hook1
const state = useFetch(resource, init, options)
Copied!
createInstance
createInstanceBesides 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.1
const CustomAsync = createInstance(defaultOptions, displayName)
Copied!
displayNameName for this instance, used by React DevTools
Last modified 2yr ago
Copy link