LogoLogo
HomeDocsGitHubDiscord
next
next
  • Introduction
  • Getting started
    • Installation
    • Upgrading
    • Usage
    • DevTools
  • API
    • Interfaces
    • Configuration options
    • State properties
    • Helper components
  • Guide
    • Async components
    • Separating view and logic
    • Async actions
    • Optimistic updates
    • Server-side rendering
  • Contributing
    • Introduction
    • Setting up
    • Development
    • Testing
    • Releasing
Powered by GitBook
On this page
  • Async component
  • useAsync hook
  • useFetch hook
  • createInstance

Was this helpful?

  1. API

Interfaces

PreviousDevToolsNextConfiguration options

Last updated 5 years ago

Was this helpful?

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 and returns a set of . The way you use these differs slightly between the useAsync and useFetch hooks, and the <Async> component.

Async component

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

  • State object

We recommend that you pass the options individually, rather than using JSX . React Async uses 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 object

  • Configuration options

We recommend that you pass options as an inline object literal, and that you 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 object

  • The resource you want to fetch

  • Custom request 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)
  • displayName Name for this instance, used by React DevTools

Default configuration options

configuration options
state props
options
state
spread attributes
render props
state
options
destructure
state
resource
init
options
defaultOptions