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.