Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

useAsync

useAsyncは、は非同期関数を実行し、その状態を追跡するカスタムフックです。

ソース@yamada-ui/utils

インポート

import { useAsync } from "@yamada-ui/react"
Copied!

使い方

編集可能な例

const [flg, { toggle }] = useBoolean()
const { value, error, loading } = useAsync(
  async () =>
    new Promise<string>((resolve, reject) => {
      console.log("deps:", JSON.stringify(flg))

      setTimeout(() => {
        if (Math.random() > 0.5) {
          resolve("✌️")
        } else {
          reject(new Error("A pseudo random error occurred"))
        }
      }, 3000)
    }),
  [flg],
)

return (
  <>
    {loading ? (
      <Text>Loading...</Text>
    ) : error ? (
      <Text>Error: {error.message}</Text>
    ) : (
      <Text>Value: {value}</Text>
    )}

    <Button mt="md" onClick={toggle}>
      Update state
    </Button>
  </>
)
Copied!

再実行をする

編集可能な例

const { value, error, loading, retry } = useAsyncRetry(
  async () =>
    new Promise<string>((resolve, reject) => {
      setTimeout(() => {
        if (Math.random() > 0.5) {
          resolve("✌️")
        } else {
          reject(new Error("A pseudo random error occurred"))
        }
      }, 3000)
    }),
  [],
)

return (
  <>
    {loading ? (
      <Text>Loading...</Text>
    ) : error ? (
      <Text>Error: {error.message}</Text>
    ) : (
      <Text>Value: {value}</Text>
    )}

    <Button mt="md" onClick={retry}>
      Retry
    </Button>
  </>
)
Copied!

GitHubでこのページを編集する

前useAnimation次useBoolean