use-async.ts

import { useCallback, useRef, useSyncExternalStore } from "react";

export const useAsyncHook = <T>(fn: () => Promise<T> | undefined) => {
  const resultRef = useRef<T>();
  const getSnapShot = () => resultRef.current;
  const subscribe = useCallback(
    (onStoreChange: () => void) => {
      const executeAsync = async () => {
        try {
          const result = await fn?.();
          resultRef.current = result;
        } catch (err) {
          resultRef.current = undefined;
        }
        onStoreChange();
      };

      executeAsync();

      return () => undefined;
    },
    [fn]
  );
  return useSyncExternalStore(subscribe, getSnapShot, getSnapShot);
};