useAsyncEffect hook

src/hooks/use-async-effect.test.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import "jest-extended";
+import { cleanup, render, waitFor } from "@testing-library/react";
+import { useAsyncEffect, AsyncEffectCallback } from "./use-async-effect";
+
+const sleep = async (milliseconds: number): Promise<void> => {
+    await new Promise((resolve) => {
+        setTimeout(() => resolve(), milliseconds);
+    });
+};
+
+describe("useAsyncEffect", () => {
+    const setupUseAsyncEffect = (asyncEffect: AsyncEffectCallback) => {
+        const TestComponent = () => {
+            useAsyncEffect(asyncEffect, []);
+            return null;
+        };
+
+        render(<TestComponent />);
+    };
+
+    test("executes async method", async () => {
+        // Arrange
+        const mockedMethod = jest.fn();
+
+        // Act
+        setupUseAsyncEffect(async () => {
+            await sleep(1);
+            mockedMethod();
+        });
+
+        // Assert
+        await waitFor(() => expect(mockedMethod).toBeCalledTimes(1));
+        await cleanup();
+    });
+
+    test("executes cleanup method", async () => {
+        // Arrange
+        const mockedMethod = jest.fn();
+        const mockedCleanupMethod = jest.fn();
+
+        // Act
+        setupUseAsyncEffect(async () => {
+            await sleep(1);
+            mockedMethod();
+            return mockedCleanupMethod;
+        });
+
+        // Assert
+        await waitFor(() => expect(mockedMethod).toBeCalledTimes(1));
+        await cleanup();
+        await waitFor(() => expect(mockedCleanupMethod).toBeCalledTimes(1));
+    });
+
+    test("isMounted initially equals true", async () => {
+        // Arrange
+        let actualIsMountedValue: boolean = false;
+        const expectedIsMountedValue: boolean = true;
+
+        // Act
+        setupUseAsyncEffect(async (isMounted) => {
+            actualIsMountedValue = isMounted();
+            await sleep(1);
+        });
+
+        // Assert
+        expect(actualIsMountedValue).toBe(expectedIsMountedValue);
+        await cleanup();
+    });
+
+    test("isMounted equals false after cleanup", async () => {
+        // Arrange
+        let actualIsMountedValue: boolean;
+        const expectedIsMountedValue: boolean = false;
+        const mockedMethod = jest.fn();
+
+        // Act
+        setupUseAsyncEffect(async (isMounted) => {
+            await sleep(100);
+            actualIsMountedValue = isMounted();
+            mockedMethod();
+        });
+
+        // Assert
+        await cleanup();
+        await waitFor(() => expect(mockedMethod).toBeCalledTimes(1));
+        expect(actualIsMountedValue).toBe(expectedIsMountedValue);
+    });
+});

src/hooks/use-async-effect.ts

@@ -0,0 +1,37 @@
+import { useEffect, DependencyList, EffectCallback, useCallback } from "react";
+import { AsyncEffectCallback } from "../types/async-effect-callback-type";
+
+/**
+ * Version of the useEffect hook that accepts an async function
+ * @export
+ * @param {AsyncEffectCallback} asyncEffect
+ * @param {DependencyList} deps
+ */
+export function useAsyncEffect(
+    asyncEffect: AsyncEffectCallback,
+    deps: DependencyList
+) {
+    const asyncCallback = useCallback<AsyncEffectCallback>(asyncEffect, deps);
+
+    useEffect(() => {
+        let cleanupMethod = () => {};
+        let isMounted = true;
+
+        async function runAsyncCallback() {
+            const result: ReturnType<EffectCallback> = await asyncCallback(
+                () => isMounted
+            );
+
+            if (typeof result === "function") {
+                cleanupMethod = result;
+            }
+        }
+
+        runAsyncCallback();
+
+        return () => {
+            cleanupMethod();
+            isMounted = false;
+        };
+    }, [asyncCallback]);
+}

src/index.ts

@@ -27,6 +27,7 @@ export { Redirects, RedirectsProps } from "./components/routing/redirects";
 // -----------------------------------------------------------------------------------------
 
 export { makeCancellable } from "./hooks/make-cancellable";
+export { useAsyncEffect } from "./hooks/use-async-effect";
 export { useCancellablePromise } from "./hooks/use-cancellable-promise";
 export { useDebounce } from "./hooks/use-debounce";
 export { useLocalization } from "./hooks/use-localization";
@@ -61,6 +62,7 @@ export { ServiceHookFactory } from "./services/service-hook-factory";
 // #region Types
 // -----------------------------------------------------------------------------------------
 
+export { AsyncEffectCallback } from "./types/async-effect-callback-type";
 export { BulkUpdateService } from "./types/bulk-update-service-type";
 export { BulkUpdateServiceHook } from "./types/bulk-update-service-hook-type";
 export { CreateService } from "./types/create-service-type";

src/types/async-effect-callback-type.ts

@@ -0,0 +1,8 @@
+import { EffectCallback } from "react";
+
+/**
+ * Type defining the asyncEffect parameter from calling `useAsyncEffect()`
+ */
+export type AsyncEffectCallback = (
+    isMounted: () => boolean
+) => Promise<ReturnType<EffectCallback>>;