---
title: useAsyncCallback
description: "`useAsyncCallback`は、非同期コールバックを管理するためのカスタムフックです。"
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-async-callback
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/hooks-useasynccallback--basic
---

```tsx
const [loading, onClick] = useAsyncCallback(async () => {
  await wait(3000)
}, [])

return (
  <Button loading={loading} onClick={onClick}>
    Click me
  </Button>
)
```

## 使い方

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

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

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

```tsx
const [loading, onClick] = useAsyncCallback(async () => {}, [])
```

### ローディングを使う

ローディングを使う場合は、`loading`に`screen`や`page`などを設定します。

```tsx
const [loading, onClick] = useAsyncCallback(
  async () => {
    await wait(3000)
  },
  [],
  { loading: "page" },
)

return (
  <Button loading={loading} onClick={onClick}>
    Click me
  </Button>
)
```

### プロセシングを無効にする

プロセシングを無効にする場合は、`processing`を`false`に設定します。

```tsx
const [, onClick] = useAsyncCallback(
  async () => {
    await wait(3000)
  },
  [],
  { loading: "page", processing: false },
)

return <Button onClick={onClick}>Click me</Button>
```