> For the complete documentation index, see [llms.txt](https://docs.react-async.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.react-async.com/api/interfaces.md).

# 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](/api/options.md) and returns a set of [state props](/api/state.md). The way you use these differs slightly between the `useAsync` and `useFetch` hooks, and the `<Async>` component.

## `Async` component

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

* [`options`](/api/options.md) Configuration options
* [`state`](/api/state.md) State object

> We recommend that you pass the options individually, rather than using JSX [spread attributes](https://reactjs.org/docs/jsx-in-depth.html#spread-attributes). React Async uses [render props](https://reactjs.org/docs/render-props.html) to return its state back to you, so it can be used by other components further down the tree.

## `useAsync` hook

```javascript
const state = useAsync(options)
```

* [`state`](/api/state.md) State object
* [`options`](/api/options.md) Configuration options

> We recommend that you pass `options` as an inline object literal, and that you [destructure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring) the `state` object to extract the properties you need, unless you have multiple instances in the same component.

## `useFetch` hook

```javascript
const state = useFetch(resource, init, options)
```

* [`state`](/api/state.md) State object
* [`resource`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Syntax) The resource you want to fetch
* [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Syntax) Custom request options
* [`options`](/api/options.md) 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.

```javascript
const CustomAsync = createInstance(defaultOptions, displayName)
```

* [`defaultOptions`](/api/options.md) Default configuration options
* `displayName` Name for this instance, used by React DevTools