useAsyncCallback

useAsyncCallback is a custom hook for managing asynchronous callbacks.

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

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

If you use this code, you need to add "use client" to the top of the file.

Usage

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

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

import { useAsyncCallback } from "@workspaces/ui"

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

Use loading

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

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

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

If you use this code, you need to add "use client" to the top of the file.

Disable processing

When disabling processing, set processing to false.

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

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

If you use this code, you need to add "use client" to the top of the file.