useAsyncCallback

useAsyncCallback is a custom hook for managing asynchronous callbacks.

Import

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

Copied!

Usage

Editable example

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

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

Copied!

Using with Loading

When using with loading, set loading to "screen" or "page".

If you want to learn more about loading, please check here.

Editable example

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

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

Copied!

Customize from Config

If you want to use loading with the execution of useAsyncCallback throughout your application, set loading.defaultComponent in the config to "screen" or "page".

Editable example

const customConfig = extendConfig({
  loading: {
    defaultComponent: "page",
  },
})

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

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

return (
  <UIProvider config={customConfig}>
    <App />
  </UIProvider>
)

Copied!

Edit this page on GitHub

PrevioususeAsync NextuseBoolean