add useAsync hook

This commit is contained in:
Ajay Bura 2025-01-19 15:24:26 +05:30
parent f74f104406
commit 0816165641

View file

@ -31,12 +31,10 @@ export type AsyncState<D, E = unknown> = AsyncIdle | AsyncLoading | AsyncSuccess
export type AsyncCallback<TArgs extends unknown[], TData> = (...args: TArgs) => Promise<TData>;
export const useAsyncCallback = <TData, TError, TArgs extends unknown[]>(
asyncCallback: AsyncCallback<TArgs, TData>
): [AsyncState<TData, TError>, AsyncCallback<TArgs, TData>] => {
const [state, setState] = useState<AsyncState<TData, TError>>({
status: AsyncStatus.Idle,
});
export const useAsync = <TData, TError, TArgs extends unknown[]>(
asyncCallback: AsyncCallback<TArgs, TData>,
onStateChange: (state: AsyncState<TData, TError>) => void
): AsyncCallback<TArgs, TData> => {
const alive = useAlive();
// Tracks the request number.
@ -53,7 +51,7 @@ export const useAsyncCallback = <TData, TError, TArgs extends unknown[]>(
flushSync(() => {
// flushSync because
// https://github.com/facebook/react/issues/26713#issuecomment-1872085134
setState({
onStateChange({
status: AsyncStatus.Loading,
});
});
@ -69,7 +67,7 @@ export const useAsyncCallback = <TData, TError, TArgs extends unknown[]>(
}
if (alive()) {
queueMicrotask(() => {
setState({
onStateChange({
status: AsyncStatus.Success,
data,
});
@ -83,7 +81,7 @@ export const useAsyncCallback = <TData, TError, TArgs extends unknown[]>(
if (alive()) {
queueMicrotask(() => {
setState({
onStateChange({
status: AsyncStatus.Error,
error: e as TError,
});
@ -92,8 +90,20 @@ export const useAsyncCallback = <TData, TError, TArgs extends unknown[]>(
throw e;
}
},
[asyncCallback, alive]
[asyncCallback, alive, onStateChange]
);
return callback;
};
export const useAsyncCallback = <TData, TError, TArgs extends unknown[]>(
asyncCallback: AsyncCallback<TArgs, TData>
): [AsyncState<TData, TError>, AsyncCallback<TArgs, TData>] => {
const [state, setState] = useState<AsyncState<TData, TError>>({
status: AsyncStatus.Idle,
});
const callback = useAsync(asyncCallback, setState);
return [state, callback];
};