backsplash-app/src/ui/hooks/useAsyncEffect.ts

An AI powered wallpaper app.

import { useEffect } from "react";

/**
 * A hook that allows using async functions in useEffect
 *
 * @param effect - Async function to run
 * @param deps - Dependency array, similar to useEffect
 * @param onError - Optional error handler
 */
export function useAsyncEffect(
  effect: () => Promise<void | (() => void)>,
  deps: React.DependencyList = [],
  onError?: (error: unknown) => void,
): void {
  useEffect(() => {
    let isMounted = true;
    let cleanup: void | (() => void);

    const runEffect = async () => {
      try {
        cleanup = await effect();
      } catch (error) {
        if (isMounted && onError) {
          onError(error);
        } else {
          console.error("Error in useAsyncEffect:", error);
        }
      }
    };

    runEffect();

    return () => {
      isMounted = false;
      if (typeof cleanup === "function") {
        cleanup();
      }
    };
  }, deps);
}

export default useAsyncEffect;