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

# useAsync

Source code is hosted on [GitHub](https://github.com/corets/use-async)

{% tabs %}
{% tab title="yarn" %}

```bash
yarn add @corets/use-async
```

{% endtab %}

{% tab title="npm" %}

```bash
npm install --save @corets/use-async
```

{% endtab %}
{% endtabs %}

This library is built on top of this package:

{% content-ref url="/pages/-Mg7Kt8XOfsD4Np5cHGW" %}
[Async](/observables/async.md)
{% endcontent-ref %}

## useAsync() <a href="#useasync" id="useasync"></a>

Takes a function or an instance of [`Async`](/observables/async.md#createasync), invokes it immediately, and keeps the state in sync with React:

```typescript
import React from "react"
import { createAsync } from "@corets/async"
import { useAsync } from "@corets/use-async"

const sharedQuery = createAsync(async () => "some global data")
    
const Example = () => {
  const query = useAsync(async () => `Current date is ${new Date().toISOString()}`)
  const globalQuery = useAsync(sharedQuery, ["some", "dependencies"])
  
  const handleReload = () => query.run()
  
  if (query.isRunning()) {
    return <h1>Loading ...</h1>
  }
  
  if (query.isErrored()) {
    return <h1>There was an error :(</h1>
  }
  
  return (
    <div>
      Result: {query.getResult()} 
      <button onClick={handleReload}>Reload</button>
    </div>
  )
}
```

{% hint style="info" %}
Check out [Async](/observables/async.md) documentation for more details.
{% endhint %}