Add flag to useTrackedPromise

The new flag will determine if the callbacks will trigger or the errors
will throw if the component using the hook is not mounted. By default
they will only trigger if it is.

x-pack/plugins/infra/public/utils/use_tracked_promise.ts

@@ -6,13 +6,15 @@
 
 /* eslint-disable max-classes-per-file */
 
-import { DependencyList, useEffect, useMemo, useRef, useState } from 'react';
+import { DependencyList, useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import { useMountedState } from 'react-use';
 
 interface UseTrackedPromiseArgs<Arguments extends any[], Result> {
   createPromise: (...args: Arguments) => Promise<Result>;
   onResolve?: (result: Result) => void;
   onReject?: (value: unknown) => void;
   cancelPreviousOn?: 'creation' | 'settlement' | 'resolution' | 'rejection' | 'never';
+  triggerOrThrow?: 'always' | 'whenMounted';
 }
 
 /**
@@ -64,16 +66,37 @@ interface UseTrackedPromiseArgs<Arguments extends any[], Result> {
  * The last argument is a normal React hook dependency list that indicates
  * under which conditions a new reference to the configuration object should be
  * used.
+ *
+ * The `onResolve`, `onReject` and possible uncatched errors are only triggered
+ * if the underlying component is mounted. To ensure they always trigger (i.e.
+ * if the promise is called in a `useLayoutEffect`) use the `triggerOrThrow`
+ * attribute:
+ *
+ * 'whenMounted': (default) they are called only if the component is mounted.
+ *
+ * 'always': they always call. The consumer is then responsible of ensuring no
+ * side effects happen if the underlying component is not mounted.
  */
 export const useTrackedPromise = <Arguments extends any[], Result>(
   {
     createPromise,
     onResolve = noOp,
     onReject = noOp,
     cancelPreviousOn = 'never',
+    triggerOrThrow = 'whenMounted',
   }: UseTrackedPromiseArgs<Arguments, Result>,
   dependencies: DependencyList
 ) => {
+  const isComponentMounted = useMountedState();
+  const shouldTriggerOrThrow = useCallback(() => {
+    switch (triggerOrThrow) {
+      case 'always':
+        return true;
+      case 'whenMounted':
+        return isComponentMounted();
+    }
+  }, [isComponentMounted, triggerOrThrow]);
+
   /**
    * If a promise is currently pending, this holds a reference to it and its
    * cancellation function.
@@ -144,7 +167,7 @@ export const useTrackedPromise = <Arguments extends any[], Result>(
               (pendingPromise) => pendingPromise.promise !== newPendingPromise.promise
             );
 
-            if (onResolve) {
+            if (onResolve && shouldTriggerOrThrow()) {
               onResolve(value);
             }
 
@@ -173,11 +196,13 @@ export const useTrackedPromise = <Arguments extends any[], Result>(
               (pendingPromise) => pendingPromise.promise !== newPendingPromise.promise
             );
 
-            if (onReject) {
-              onReject(value);
-            }
+            if (shouldTriggerOrThrow()) {
+              if (onReject) {
+                onReject(value);
+              }
 
-            throw value;
+              throw value;
+            }
           }
         ),
       };