@xyo-network/react-shared 2.54.0 → 2.55.0

package/dist/esm/hooks/usePayloadHash.js

@@ -1,11 +1,11 @@
 import { PayloadHasher } from '@xyo-network/core';
 import { usePromise } from './usePromise';
 export const usePayloadHash = (payload, dependencies) => {
-    return usePromise(payload ? PayloadHasher.hashAsync(payload) : undefined, [payload, ...(dependencies ?? [])])[0];
+    return usePromise(() => (payload ? PayloadHasher.hashAsync(payload) : undefined), dependencies)[0];
 };
 export const usePayloadHashes = (payloads, dependencies) => {
-    return usePromise(payloads
+    return usePromise(() => payloads
         ? Promise.all(payloads.map(async (payload) => [payload, await PayloadHasher.hashAsync(payload)]))
-        : undefined, [payloads, ...(dependencies ?? [])])[0];
+        : undefined, dependencies)[0];
 };
 //# sourceMappingURL=usePayloadHash.js.map

package/dist/esm/hooks/usePayloadHash.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePayloadHash.js","sourceRoot":"","sources":["../../../src/hooks/usePayloadHash.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,CAAC,MAAM,cAAc,GAAG,CAA2B,OAAoC,EAAE,YAAwB,EAAE,EAAE;IACzH,OAAO,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,OAAO,EAAE,GAAG,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAClH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAA2B,QAAuC,EAAE,YAAwB,EAAE,EAAE;IAC9H,OAAO,UAAU,CACf,QAAQ;QACN,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAA8B,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,EAAE,MAAM,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC9H,CAAC,CAAC,SAAS,EACb,CAAC,QAAQ,EAAE,GAAG,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CACpC,CAAC,CAAC,CAAC,CAAA;AACN,CAAC,CAAA"}
+{"version":3,"file":"usePayloadHash.js","sourceRoot":"","sources":["../../../src/hooks/usePayloadHash.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAIjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,CAAC,MAAM,cAAc,GAAG,CAA2B,OAAoC,EAAE,YAA6B,EAAE,EAAE;IAC9H,OAAO,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAA;AACpG,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAA2B,QAAuC,EAAE,YAA6B,EAAE,EAAE;IACnI,OAAO,UAAU,CACf,GAAG,EAAE,CACH,QAAQ;QACN,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAA8B,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,EAAE,MAAM,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC9H,CAAC,CAAC,SAAS,EACf,YAAY,CACb,CAAC,CAAC,CAAC,CAAA;AACN,CAAC,CAAA"}

package/dist/esm/hooks/usePromise.js

@@ -1,74 +1,101 @@
 // Inspired from https://github.com/bsonntag/react-use-promise
-import { useAsyncEffect } from '@xylabs/react-async-effect';
-import { useReducer } from 'react';
+import { useEffect, useMemo, useReducer } from 'react';
 export var State;
 (function (State) {
     State["pending"] = "pending";
     State["rejected"] = "rejected";
     State["resolved"] = "resolved";
 })(State || (State = {}));
-const defaultState = {
-    error: undefined,
-    result: undefined,
-    state: State.pending,
-};
-const reducer = (_state, action) => {
-    switch (action.type) {
-        case State.pending:
-            return defaultState;
-        case State.resolved:
-            return {
-                error: undefined,
-                result: action.payload,
-                state: State.resolved,
-            };
-        case State.rejected:
-            return {
-                error: action.payload,
-                result: undefined,
-                state: State.rejected,
-            };
-        default:
-            throw Error(`Error parsing action ${JSON.stringify(action, null, 2)}`);
-    }
-};
 /**
  * usePromise -
  */
-export const usePromise = (promise, dependencies = []) => {
-    const [{ error, result, state }, dispatch] = useReducer(reducer, defaultState);
-    useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    async () => {
-        if (!promise) {
-            return;
+export const usePromise = (promise, dependencies = [], debug = undefined) => {
+    const defaultState = {
+        error: undefined,
+        result: undefined,
+        state: State.pending,
+    };
+    const reducer = (_state, action) => {
+        switch (action.type) {
+            case State.pending:
+                return defaultState;
+            case State.resolved:
+                return {
+                    error: undefined,
+                    result: action.payload,
+                    state: State.resolved,
+                };
+            case State.rejected:
+                return {
+                    error: action.error,
+                    result: undefined,
+                    state: State.rejected,
+                };
+            default:
+                throw Error(`Error parsing action ${JSON.stringify(action, null, 2)}`);
         }
-        let canceled = false;
-        dispatch({ type: State.pending });
+    };
+    const [{ error, result, state }, dispatch] = useReducer(reducer, defaultState);
+    const promiseMemo = useMemo(() => {
         try {
-            const result = await promise;
-            !canceled
-                ? dispatch({
-                    payload: result,
-                    type: State.resolved,
-                })
-                : undefined;
+            return promise?.();
         }
         catch (e) {
-            !canceled
-                ? dispatch({
-                    payload: e,
+            dispatch({
+                error: e,
+                payload: undefined,
+                type: State.rejected,
+            });
+        }
+    }, dependencies);
+    if (debug)
+        console.debug(`usePromise [${debug}] Main Function`);
+    useEffect(() => {
+        dispatch({ type: State.pending });
+        if (debug)
+            console.debug(`usePromise [${debug}] useEffect`);
+        if (promiseMemo instanceof Promise) {
+            promiseMemo
+                .then((payload) => {
+                if (debug)
+                    console.debug(`usePromise [${debug}] then`);
+                dispatch({
+                    error: undefined,
+                    payload,
+                    type: State.resolved,
+                });
+            })
+                .catch((error) => {
+                if (debug)
+                    console.debug(`usePromise [${debug}] catch`);
+                dispatch({
+                    error: error,
+                    payload: undefined,
                     type: State.rejected,
-                })
-                : undefined;
+                });
+            });
+        }
+        else if (promiseMemo) {
+            dispatch({
+                error: undefined,
+                payload: promiseMemo,
+                type: State.resolved,
+            });
+        }
+        else {
+            if (debug)
+                console.debug(`usePromise [${debug}] no-promise`);
+            dispatch({
+                error: undefined,
+                payload: undefined,
+                type: State.resolved,
+            });
         }
         return () => {
-            canceled = true;
+            if (debug)
+                console.debug(`usePromise [${debug}] useEffect callback`);
         };
-    }, 
-    // eslint can't inspect the array to verify dependencies are missing
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    dependencies);
+    }, [promiseMemo]);
     return [result, error, state];
 };
 //# sourceMappingURL=usePromise.js.map

package/dist/esm/hooks/usePromise.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePromise.js","sourceRoot":"","sources":["../../../src/hooks/usePromise.ts"],"names":[],"mappings":"AAAA,8DAA8D;AAE9D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,MAAM,CAAN,IAAY,KAIX;AAJD,WAAY,KAAK;IACf,4BAAmB,CAAA;IACnB,8BAAqB,CAAA;IACrB,8BAAqB,CAAA;AACvB,CAAC,EAJW,KAAK,KAAL,KAAK,QAIhB;AAQD,MAAM,YAAY,GAAiB;IACjC,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,KAAK,CAAC,OAAO;CACrB,CAAA;AAMD,MAAM,OAAO,GAAG,CAAC,MAAoB,EAAE,MAAc,EAAE,EAAE;IACvD,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,KAAK,CAAC,OAAO;YAChB,OAAO,YAAY,CAAA;QAErB,KAAK,KAAK,CAAC,QAAQ;YACjB,OAAO;gBACL,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,MAAM,CAAC,OAAO;gBACtB,KAAK,EAAE,KAAK,CAAC,QAAQ;aACtB,CAAA;QAEH,KAAK,KAAK,CAAC,QAAQ;YACjB,OAAO;gBACL,KAAK,EAAE,MAAM,CAAC,OAAO;gBACrB,MAAM,EAAE,SAAS;gBACjB,KAAK,EAAE,KAAK,CAAC,QAAQ;aACtB,CAAA;QAEH;YACE,MAAM,KAAK,CAAC,wBAAwB,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAA;KACzE;AACH,CAAC,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,OAA6B,EAC7B,eAA0B,EAAE,EACiC,EAAE;IAC/D,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAA;IAE9E,cAAc;IACZ,uDAAuD;IACvD,KAAK,IAAI,EAAE;QACT,IAAI,CAAC,OAAO,EAAE;YACZ,OAAM;SACP;QAED,IAAI,QAAQ,GAAG,KAAK,CAAA;QAEpB,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAA;QAEjC,IAAI;YACF,MAAM,MAAM,GAAG,MAAM,OAAO,CAAA;YAC5B,CAAC,QAAQ;gBACP,CAAC,CAAC,QAAQ,CAAC;oBACP,OAAO,EAAE,MAAM;oBACf,IAAI,EAAE,KAAK,CAAC,QAAQ;iBACrB,CAAC;gBACJ,CAAC,CAAC,SAAS,CAAA;SACd;QAAC,OAAO,CAAC,EAAE;YACV,CAAC,QAAQ;gBACP,CAAC,CAAC,QAAQ,CAAC;oBACP,OAAO,EAAE,CAAU;oBACnB,IAAI,EAAE,KAAK,CAAC,QAAQ;iBACrB,CAAC;gBACJ,CAAC,CAAC,SAAS,CAAA;SACd;QAED,OAAO,GAAG,EAAE;YACV,QAAQ,GAAG,IAAI,CAAA;QACjB,CAAC,CAAA;IACH,CAAC;IACD,oEAAoE;IACpE,uDAAuD;IACvD,YAAY,CACb,CAAA;IAED,OAAO,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;AAC/B,CAAC,CAAA"}
+{"version":3,"file":"usePromise.js","sourceRoot":"","sources":["../../../src/hooks/usePromise.ts"],"names":[],"mappings":"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"}

package/dist/types/hooks/usePayloadHash.d.ts

@@ -1,7 +1,8 @@
+import { DependencyList } from 'react';
 export declare const usePayloadHash: <TPayload extends import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & {
     schema: string;
-}>(payload: TPayload | null | undefined, dependencies?: unknown[]) => string | undefined;
+}>(payload: TPayload | null | undefined, dependencies?: DependencyList) => string | undefined;
 export declare const usePayloadHashes: <TPayload extends import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & {
     schema: string;
-}>(payloads: TPayload[] | null | undefined, dependencies?: unknown[]) => [TPayload, string][] | undefined;
+}>(payloads: TPayload[] | null | undefined, dependencies?: DependencyList) => [TPayload, string][] | undefined;
 //# sourceMappingURL=usePayloadHash.d.ts.map

package/dist/types/hooks/usePayloadHash.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePayloadHash.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePayloadHash.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc;;wDAAmF,OAAO,EAAE,uBAEtH,CAAA;AAED,eAAO,MAAM,gBAAgB;;2DAAsF,OAAO,EAAE,qCAO3H,CAAA"}
+{"version":3,"file":"usePayloadHash.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePayloadHash.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAItC,eAAO,MAAM,cAAc;;wDAAmF,cAAc,uBAE3H,CAAA;AAED,eAAO,MAAM,gBAAgB;;2DAAsF,cAAc,qCAQhI,CAAA"}

package/dist/types/hooks/usePromise.d.ts

@@ -1,4 +1,5 @@
 import { Promisable } from '@xyo-network/promise';
+import { DependencyList } from 'react';
 export declare enum State {
     pending = "pending",
     rejected = "rejected",
@@ -7,5 +8,5 @@ export declare enum State {
 /**
  * usePromise -
  */
-export declare const usePromise: <TResult>(promise?: Promisable<TResult, never> | undefined, dependencies?: unknown[]) => [TResult | undefined, Error | undefined, State | undefined];
+export declare const usePromise: <TResult>(promise: () => Promisable<TResult, never> | undefined, dependencies?: DependencyList, debug?: string | undefined) => [TResult | undefined, Error | undefined, State | undefined];
 //# sourceMappingURL=usePromise.d.ts.map

package/dist/types/hooks/usePromise.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePromise.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePromise.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAGjD,oBAAY,KAAK;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AA0CD;;GAEG;AACH,eAAO,MAAM,UAAU,6EAEP,OAAO,EAAE,gEA0CxB,CAAA"}
+{"version":3,"file":"usePromise.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePromise.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,cAAc,EAA2C,MAAM,OAAO,CAAA;AAE/E,oBAAY,KAAK;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAUD;;GAEG;AACH,eAAO,MAAM,UAAU,0GAGd,MAAM,GAAG,SAAS,gEAyF1B,CAAA"}

package/package.json

@@ -12,21 +12,20 @@
   "dependencies": {
     "@xylabs/pixel": "^1.4.13",
     "@xylabs/react-appbar": "^2.17.3",
-    "@xylabs/react-async-effect": "^2.17.3",
     "@xylabs/react-button": "^2.17.3",
     "@xylabs/react-flexbox": "^2.17.3",
     "@xylabs/react-link": "^2.17.3",
     "@xylabs/react-shared": "^2.17.3",
-    "@xyo-network/core": "^2.62.1",
-    "@xyo-network/payload-model": "^2.62.1",
-    "@xyo-network/promise": "^2.62.1",
-    "@xyo-network/react-event": "^2.54.0"
+    "@xyo-network/core": "^2.63.1",
+    "@xyo-network/payload-model": "^2.63.1",
+    "@xyo-network/promise": "^2.63.1",
+    "@xyo-network/react-event": "^2.55.0"
   },
   "devDependencies": {
-    "@storybook/react": "^7.0.21",
+    "@storybook/react": "^7.0.23",
     "@xylabs/react-quick-tip-button": "^2.17.3",
-    "@xylabs/ts-scripts-yarn3": "^2.17.13",
-    "@xylabs/tsconfig-react": "^2.17.13",
+    "@xylabs/ts-scripts-yarn3": "^2.17.17",
+    "@xylabs/tsconfig-react": "^2.17.17",
     "typescript": "^5.1.3"
   },
   "peerDependencies": {
@@ -81,5 +80,5 @@
   },
   "sideEffects": false,
   "types": "dist/types/index.d.ts",
-  "version": "2.54.0"
+  "version": "2.55.0"
 }

package/src/hooks/usePayloadHash.ts

@@ -1,17 +1,19 @@
 import { PayloadHasher } from '@xyo-network/core'
 import { Payload } from '@xyo-network/payload-model'
+import { DependencyList } from 'react'
 
 import { usePromise } from './usePromise'
 
-export const usePayloadHash = <TPayload extends Payload>(payload: TPayload | undefined | null, dependencies?: unknown[]) => {
-  return usePromise(payload ? PayloadHasher.hashAsync(payload) : undefined, [payload, ...(dependencies ?? [])])[0]
+export const usePayloadHash = <TPayload extends Payload>(payload: TPayload | undefined | null, dependencies?: DependencyList) => {
+  return usePromise(() => (payload ? PayloadHasher.hashAsync(payload) : undefined), dependencies)[0]
 }
 
-export const usePayloadHashes = <TPayload extends Payload>(payloads: TPayload[] | undefined | null, dependencies?: unknown[]) => {
+export const usePayloadHashes = <TPayload extends Payload>(payloads: TPayload[] | undefined | null, dependencies?: DependencyList) => {
   return usePromise(
-    payloads
-      ? Promise.all(payloads.map<Promise<[TPayload, string]>>(async (payload) => [payload, await PayloadHasher.hashAsync(payload)]))
-      : undefined,
-    [payloads, ...(dependencies ?? [])],
+    () =>
+      payloads
+        ? Promise.all(payloads.map<Promise<[TPayload, string]>>(async (payload) => [payload, await PayloadHasher.hashAsync(payload)]))
+        : undefined,
+    dependencies,
   )[0]
 }

package/src/hooks/usePromise.ts

@@ -1,8 +1,7 @@
 // Inspired from https://github.com/bsonntag/react-use-promise
 
-import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { Promisable } from '@xyo-network/promise'
-import { useReducer } from 'react'
+import { DependencyList, Reducer, useEffect, useMemo, useReducer } from 'react'
 
 export enum State {
   pending = 'pending',
@@ -16,85 +15,101 @@ interface PromiseState<T = void> {
   state?: State
 }
 
-const defaultState: PromiseState = {
-  error: undefined,
-  result: undefined,
-  state: State.pending,
-}
-
-// Since the resolved promise value can be anything, any seems appropriate
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Action = { payload?: any; type: State }
-
-const reducer = (_state: PromiseState, action: Action) => {
-  switch (action.type) {
-    case State.pending:
-      return defaultState
-
-    case State.resolved:
-      return {
-        error: undefined,
-        result: action.payload,
-        state: State.resolved,
-      }
-
-    case State.rejected:
-      return {
-        error: action.payload,
-        result: undefined,
-        state: State.rejected,
-      }
-
-    default:
-      throw Error(`Error parsing action ${JSON.stringify(action, null, 2)}`)
-  }
-}
+type Action<T> = { error?: Error; payload?: T; type: State }
 
 /**
  * usePromise -
  */
 export const usePromise = <TResult>(
-  promise?: Promisable<TResult>,
-  dependencies: unknown[] = [],
+  promise: () => Promisable<TResult> | undefined,
+  dependencies: DependencyList = [],
+  debug: string | undefined = undefined,
 ): [TResult | undefined, Error | undefined, State | undefined] => {
-  const [{ error, result, state }, dispatch] = useReducer(reducer, defaultState)
-
-  useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    async () => {
-      if (!promise) {
-        return
-      }
-
-      let canceled = false
+  const defaultState: PromiseState<TResult> = {
+    error: undefined,
+    result: undefined,
+    state: State.pending,
+  }
 
-      dispatch({ type: State.pending })
+  const reducer: Reducer<PromiseState<TResult>, Action<TResult>> = (_state: PromiseState<TResult>, action: Action<TResult>) => {
+    switch (action.type) {
+      case State.pending:
+        return defaultState
+
+      case State.resolved:
+        return {
+          error: undefined,
+          result: action.payload,
+          state: State.resolved,
+        }
+
+      case State.rejected:
+        return {
+          error: action.error,
+          result: undefined,
+          state: State.rejected,
+        }
+
+      default:
+        throw Error(`Error parsing action ${JSON.stringify(action, null, 2)}`)
+    }
+  }
 
-      try {
-        const result = await promise
-        !canceled
-          ? dispatch({
-              payload: result,
-              type: State.resolved,
-            })
-          : undefined
-      } catch (e) {
-        !canceled
-          ? dispatch({
-              payload: e as Error,
-              type: State.rejected,
-            })
-          : undefined
-      }
+  const [{ error, result, state }, dispatch] = useReducer(reducer, defaultState)
 
-      return () => {
-        canceled = true
-      }
-    },
-    // eslint can't inspect the array to verify dependencies are missing
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    dependencies,
-  )
+  const promiseMemo = useMemo(() => {
+    try {
+      return promise?.()
+    } catch (e) {
+      dispatch({
+        error: e as Error,
+        payload: undefined,
+        type: State.rejected,
+      })
+    }
+  }, dependencies)
+
+  if (debug) console.debug(`usePromise [${debug}] Main Function`)
+
+  useEffect(() => {
+    dispatch({ type: State.pending })
+    if (debug) console.debug(`usePromise [${debug}] useEffect`)
+    if (promiseMemo instanceof Promise) {
+      promiseMemo
+        .then((payload) => {
+          if (debug) console.debug(`usePromise [${debug}] then`)
+          dispatch({
+            error: undefined,
+            payload,
+            type: State.resolved,
+          })
+        })
+        .catch((error) => {
+          if (debug) console.debug(`usePromise [${debug}] catch`)
+          dispatch({
+            error: error as Error,
+            payload: undefined,
+            type: State.rejected,
+          })
+        })
+    } else if (promiseMemo) {
+      dispatch({
+        error: undefined,
+        payload: promiseMemo,
+        type: State.resolved,
+      })
+    } else {
+      if (debug) console.debug(`usePromise [${debug}] no-promise`)
+      dispatch({
+        error: undefined,
+        payload: undefined,
+        type: State.resolved,
+      })
+    }
+    return () => {
+      if (debug) console.debug(`usePromise [${debug}] useEffect callback`)
+    }
+  }, [promiseMemo])
 
   return [result, error, state]
 }