Function useAsync

src/app/hooks/useAsyncCallback.ts:34–97

(
  asyncCallback: AsyncCallback<TArgs, TData>,
  onStateChange: (state: AsyncState<TData, TError>) => void
)

export type AsyncCallback<TArgs extends unknown[], TData> = (...args: TArgs) => Promise<TData>;

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.
  // If two or more requests are made subsequently
  // we will throw all old request's response after they resolved.
  const reqNumberRef = useRef(0);

  const callback: AsyncCallback<TArgs, TData> = useCallback(
    async (...args) => {
      queueMicrotask(() => {
        // Warning: flushSync was called from inside a lifecycle method.
        // React cannot flush when React is already rendering.
        // Consider moving this call to a scheduler task or micro task.
        flushSync(() => {
          // flushSync because
          // https://github.com/facebook/react/issues/26713#issuecomment-1872085134
          onStateChange({
            status: AsyncStatus.Loading,
          });
        });
      });

      reqNumberRef.current += 1;

      const currentReqNumber = reqNumberRef.current;
      try {
        const data = await asyncCallback(...args);
        if (currentReqNumber !== reqNumberRef.current) {
          throw new Error('AsyncCallbackHook: Request replaced!');
        }
        if (alive()) {
          queueMicrotask(() => {
            onStateChange({
              status: AsyncStatus.Success,
              data,
            });
          });
        }
        return data;
      } catch (e) {
        if (currentReqNumber !== reqNumberRef.current) {
          throw new Error('AsyncCallbackHook: Request replaced!');
        }

        if (alive()) {
          queueMicrotask(() => {
            onStateChange({
              status: AsyncStatus.Error,
              error: e as TError,
            });
          });
        }
        throw e;
      }