feat: add useAsync, useAsyncFunc, useAsyncRetry

Author: hirotomoyamada

.changeset/angry-hairs-play.md

@@ -0,0 +1,5 @@
+---
+'@yamada-ui/utils': patch
+---
+
+Added useAsync, useAsyncFunc, useAsyncRetry.

packages/utils/src/react.tsx

@@ -195,3 +195,105 @@ export const useUpdateEffect = (callback: React.EffectCallback, deps: React.Depe
     }
   }, [])
 }
+
+export type FunctionReturningPromise = (...args: any[]) => Promise<any>
+
+export const useAsync = <T extends FunctionReturningPromise>(
+  func: T,
+  deps: React.DependencyList = [],
+) => {
+  const [state, callback] = useAsyncFunc(func, deps, { loading: true })
+
+  React.useEffect(() => {
+    callback()
+  }, [callback])
+
+  return state
+}
+
+export type AsyncState<T> =
+  | {
+      loading: boolean
+      error?: undefined
+      value?: undefined
+    }
+  | {
+      loading: true
+      error?: Error | undefined
+      value?: T
+    }
+  | {
+      loading: false
+      error: Error
+      value?: undefined
+    }
+  | {
+      loading: false
+      error?: undefined
+      value: T
+    }
+
+export type PromiseType<P extends Promise<any>> = P extends Promise<infer T> ? T : never
+
+type StateFromFunctionReturningPromise<T extends FunctionReturningPromise> = AsyncState<
+  PromiseType<ReturnType<T>>
+>
+
+export type AsyncFnReturn<T extends FunctionReturningPromise = FunctionReturningPromise> = [
+  StateFromFunctionReturningPromise<T>,
+  T,
+]
+
+export const useAsyncFunc = <T extends FunctionReturningPromise>(
+  func: T,
+  deps: React.DependencyList = [],
+  initialState: StateFromFunctionReturningPromise<T> = { loading: false },
+): AsyncFnReturn<T> => {
+  const lastCallId = React.useRef(0)
+  const isMounted = useIsMounted()
+  const [state, setState] = React.useState<StateFromFunctionReturningPromise<T>>(initialState)
+
+  const callback = React.useCallback((...args: Parameters<T>): ReturnType<T> => {
+    const callId = ++lastCallId.current
+
+    if (!state.loading) {
+      setState((prevState) => ({ ...prevState, loading: true }))
+    }
+
+    return func(...args).then(
+      (value) => {
+        if (isMounted.current && callId === lastCallId.current) setState({ value, loading: false })
+
+        return value
+      },
+      (error) => {
+        if (isMounted.current && callId === lastCallId.current) setState({ error, loading: false })
+
+        return error
+      },
+    ) as ReturnType<T>
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps)
+
+  return [state, callback as unknown as T]
+}
+
+export type AsyncStateRetry<T> = AsyncState<T> & {
+  retry(): void
+}
+
+export const useAsyncRetry = <T,>(func: () => Promise<T>, deps: React.DependencyList = []) => {
+  const [attempt, setAttempt] = React.useState<number>(0)
+  const state = useAsync(func, [...deps, attempt])
+
+  const stateLoading = state.loading
+
+  const retry = React.useCallback(() => {
+    if (stateLoading) return
+
+    setAttempt((currentAttempt) => currentAttempt + 1)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...deps, stateLoading])
+
+  return { ...state, retry }
+}