---
title: useAsyncCallback
description: "`useAsyncCallback` is a custom hook for managing asynchronous callbacks."
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>
)
```

## Usage

```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 () => {}, [])
```

### Use loading

When using loading, set `loading` to `screen` or `page` etc.

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

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

### Disable processing

When disabling processing, set `processing` to `false`.

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

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