React: memolize async value custom hooks

useAsyncMemo.ts

import { DependencyList, useEffect, useState } from "react";

/**
 * memolize async value custom hooks
 *
 * base: https://github.com/awmleer/use-async-memo
 *
 * usage1: const value = useAsyncMemo(async () => {}, [deps1, dep2, ...]);
 * usage2: const value = useAsyncMemo(async () => {}, [deps1, dep2, ...], initialValue);
 *
 * @export
 * @template T
 * @param {(() => Promise<T> | undefined | null)} promiseFunc
 * @param {DependencyList} deps
 * @param {((() => T) | T)} [initialState]
 * @returns {(T | (T | undefined))}
 */
export default function useAsyncMemo<T>(
  promiseFunc: () => Promise<T> | undefined | null,
  deps: DependencyList,
  initialState?: (() => T) | T
): T | (T | undefined) {
  const [memoValue, setMemoValue] = useState<T | undefined>(initialState);

  useEffect(() => {
    let aborted = false;

    const exec = async () => {
      const value = await promiseFunc();

      // abort when canceled
      if (aborted || !value) {
        return;
      }
      setMemoValue(value);
    };

    exec();

    return () => {
      aborted = true;
    };
  }, deps);

  return memoValue;
}