---
title: useAsync
description: "`useAsync`は、は非同期関数を実行し、その状態を追跡するカスタムフックです。"
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-async
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/hooks-useasync--basic
---

```tsx
const [flg, { toggle }] = useBoolean()
const { value, error, loading } = useAsync(
  async () =>
    new Promise<string>((resolve, reject) => {
      console.log("deps:", JSON.stringify(flg))

      setTimeout(() => {
        if (Math.random() > 0.5) {
          resolve("Succeeded.")
        } else {
          reject(new Error("A pseudo random error occurred."))
        }
      }, 3000)
    }),
  [flg],
)

return (
  <VStack alignItems="flex-start">
    {loading ? (
      <Text>Loading...</Text>
    ) : error ? (
      <Text>Error: {error.message}</Text>
    ) : (
      <Text>Value: {value}</Text>
    )}

    <Button onClick={toggle}>Update state</Button>
  </VStack>
)
```

## 使い方

```tsx
import { useAsync } from "@yamada-ui/react"
```

```tsx
import { useAsync } from "@/components/ui"
```

```tsx
import { useAsync } from "@workspaces/ui"
```

```tsx
const { value, error, loading } = useAsync(async () => {}, [])
```