useAsync use an optional deps for callback, most of the time it just need to be rendered once

2 files changed, 28 insertions, 30 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
index 64a0c2586..676c65d2d 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@@ -247,9 +247,7 @@ export function WithdrawPageWithParsedURI({
   const [reviewing, setReviewing] = useState<boolean>(false);
   const [reviewed, setReviewed] = useState<boolean>(false);
 
-  const knownExchangesHook = useAsyncAsHook(
-    useCallback(() => wxApi.listExchanges(), []),
-  );
+  const knownExchangesHook = useAsyncAsHook(wxApi.listExchanges);
 
   const knownExchanges = useMemo(
     () =>
@@ -278,21 +276,19 @@ export function WithdrawPageWithParsedURI({
     [customExchange, thisCurrencyExchanges, uriInfo.defaultExchangeBaseUrl],
   );
 
-  const detailsHook = useAsyncAsHook(
-    useCallback(async () => {
-      if (!exchange) throw Error("no default exchange");
-      const tos = await wxApi.getExchangeTos(exchange, ["text/xml"]);
+  const detailsHook = useAsyncAsHook(async () => {
+    if (!exchange) throw Error("no default exchange");
+    const tos = await wxApi.getExchangeTos(exchange, ["text/xml"]);
 
-      const tosState = buildTermsOfServiceState(tos);
+    const tosState = buildTermsOfServiceState(tos);
 
-      const info = await wxApi.getExchangeWithdrawalInfo({
-        exchangeBaseUrl: exchange,
-        amount: withdrawAmount,
-        tosAcceptedFormat: ["text/xml"],
-      });
-      return { tos: tosState, info };
-    }, [exchange, withdrawAmount]),
-  );
+    const info = await wxApi.getExchangeWithdrawalInfo({
+      exchangeBaseUrl: exchange,
+      amount: withdrawAmount,
+      tosAcceptedFormat: ["text/xml"],
+    });
+    return { tos: tosState, info };
+  });
 
   if (!detailsHook) {
     return <Loading />;
@@ -357,14 +353,10 @@ export function WithdrawPageWithParsedURI({
 }
 export function WithdrawPage({ talerWithdrawUri }: Props): VNode {
   const { i18n } = useTranslationContext();
-  const uriInfoHook = useAsyncAsHook(
-    useCallback(
-      () =>
-        !talerWithdrawUri
-          ? Promise.reject(undefined)
-          : wxApi.getWithdrawalDetailsForUri({ talerWithdrawUri }),
-      [talerWithdrawUri],
-    ),
+  const uriInfoHook = useAsyncAsHook(() =>
+    !talerWithdrawUri
+      ? Promise.reject(undefined)
+      : wxApi.getWithdrawalDetailsForUri({ talerWithdrawUri }),
   );
 
   if (!talerWithdrawUri) {
diff --git a/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts b/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts
index 4e86c5ee5..b2d71874f 100644
--- a/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts
@@ -17,7 +17,7 @@ import {
   NotificationType, TalerErrorDetail
 } from "@gnu-taler/taler-util";
 import { TalerError } from "@gnu-taler/taler-wallet-core";
-import { useEffect, useState } from "preact/hooks";
+import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
 import * as wxApi from "../wxApi.js";
 
 interface HookOk<T> {
@@ -41,16 +41,22 @@ export interface HookOperationalError {
 
 export type HookResponse<T> = HookOk<T> | HookError | undefined;
 
-//"withdraw-group-finished"
 export function useAsyncAsHook<T>(
   fn: () => Promise<T>,
   updateOnNotification?: Array<NotificationType>,
+  deps?: any[],
 ): HookResponse<T> {
+
+  const args = useMemo(() => ({
+    fn, updateOnNotification
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), deps || [])
   const [result, setHookResponse] = useState<HookResponse<T>>(undefined);
+
   useEffect(() => {
     async function doAsync(): Promise<void> {
       try {
-        const response = await fn();
+        const response = await args.fn();
         setHookResponse({ hasError: false, response });
       } catch (e) {
         if (e instanceof TalerError) {
@@ -69,11 +75,11 @@ export function useAsyncAsHook<T>(
       }
     }
     doAsync();
-    if (updateOnNotification && updateOnNotification.length > 0) {
-      return wxApi.onUpdateNotification(updateOnNotification, () => {
+    if (args.updateOnNotification && args.updateOnNotification.length > 0) {
+      return wxApi.onUpdateNotification(args.updateOnNotification, () => {
         doAsync();
       });
     }
-  }, [fn, updateOnNotification]);
+  }, [args]);
   return result;
 }