Custom hook for that provides an "ignore" object to avoid race conditions or memory leaks in async operations

useAsyncEffect.tsx

import { useEffect } from 'react';

type EffectReturn = Promise<(() => void) | void>;
type EffectFunction = (ignore: { current: boolean }) => EffectReturn;
type DependencyArray = unknown[];

/**
 * Works like useEffect, but accepts an async function as the effect
 * function and provides an ignore object with a current attribute
 * that tells if you should ignore the result.
 *
 * From React Hooks API reference: "If a component renders multiple
 * times (as they typically do), the previous effect is cleaned up
 * before executing the next effect"
 *
 *   useAsyncEffect(async (ignore) => {
 *     const result = await asyncOperation();
 *
 *     if (!ignore.current) {
 *       setResult(result);
 *     }
 *   }, []);
 */
function useAsyncEffect(
  effectFunction: EffectFunction,
  dependencyArray: DependencyArray,
): void {
  /* eslint-disable react-hooks/exhaustive-deps */
  useEffect(() => {
    const ignore = { current: true };
    const result = effectFunction(ignore);

    return () => {
      ignore.current = false;

      (async () => {
        const cleanupFunction = await result;

        if (typeof cleanupFunction === 'function') {
          cleanupFunction();
        }
      })();
    };
  }, dependencyArray);
  /* eslint-enable react-hooks/exhaustive-deps */
}

export default useAsyncEffect;