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"をファイルの上部に追加する必要があります。