useAsyncCallback

useAsyncCallbackは、非同期コールバックを管理するためのカスタムフックです。

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

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

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

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

import { useAsyncCallback } from "@workspaces/ui"

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

ローディングを使う

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

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

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

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

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

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

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。