# 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](https://docs.react-async.com/api/options) and returns a set of [state props](https://docs.react-async.com/api/state). 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`](https://docs.react-async.com/api/options) Configuration options
* [`state`](https://docs.react-async.com/api/state) 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`](https://docs.react-async.com/api/state) State object
* [`options`](https://docs.react-async.com/api/options) 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`](https://docs.react-async.com/api/state) 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`](https://docs.react-async.com/api/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.

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

* [`defaultOptions`](https://docs.react-async.com/api/options) Default configuration options
* `displayName` Name for this instance, used by React DevTools


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.react-async.com/api/interfaces.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.