Add useAsyncEffect hook

1 files changed, 21 insertions, 0 deletions

diff --git a/gui/src/renderer/lib/utilityHooks.ts b/gui/src/renderer/lib/utilityHooks.ts
index ee3f191593..9e8cea0bad 100644
--- a/gui/src/renderer/lib/utilityHooks.ts
+++ b/gui/src/renderer/lib/utilityHooks.ts
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef } from 'react';
+import consumePromise from '../../shared/promise';
 
 export function useMounted() {
   const mountedRef = useRef(false);
@@ -25,3 +26,23 @@ export function assignToRef<T>(element: T | null, ref?: React.Ref<T>) {
     (ref as React.MutableRefObject<T>).current = element;
   }
 }
+
+export function useAsyncEffect(
+  effect: () => Promise<void | (() => void | Promise<void>)>,
+  dependencies: unknown[],
+): void {
+  const isMounted = useMounted();
+
+  useEffect(() => {
+    const promise = effect();
+    return () => {
+      consumePromise(
+        promise.then((destructor) => {
+          if (isMounted() && destructor) {
+            return destructor();
+          }
+        }),
+      );
+    };
+  }, dependencies);
+}