Fix infinite re-render loop in useAppsAlert causing crash

src/extensions/components/AppAlerts/useAppsFailedDeliveries.ts

@@ -1,6 +1,6 @@
 import { useAppFailedPendingWebhooksLazyQuery } from "@dashboard/graphql";
 import type moment from "moment-timezone";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 
 import { getLatestFailedAttemptFromWebhooks, type LatestWebhookDeliveryWithMoment } from "./utils";
 
@@ -33,14 +33,14 @@ export const useAppsFailedDeliveries = (): AppsFailedDeliveries => {
     [data?.apps?.edges],
   );
 
-  const handleFetchAppsWebhooks = () => {
+  const handleFetchAppsWebhooks = useCallback(() => {
     // Permissions are checked outside of this hook
     fetchAppsWebhooks({
       variables: {
         canFetchAppEvents: true,
       },
     });
-  };
+  }, [fetchAppsWebhooks]);
 
   return {
     hasFailed: !!lastFailedWebhookDate,

src/extensions/components/AppAlerts/useSidebarDotState.ts

@@ -1,5 +1,5 @@
 import { errorTracker } from "@dashboard/services/errorTracking";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { useSidebarWebhookAlertMetadata } from "./useSidebarWebhookAlertMetadata";
 
@@ -42,34 +42,40 @@ export const useSidebarDotState = (): SidebarDotState => {
     }
   }, [sidebarDotRemoteState]);
 
-  const handleClick = async (clickDate: string) => {
-    try {
-      await persist({
-        lastClickDate: clickDate,
-        lastFailedAttemptDate: lastFailedAttemptDateRef.current ?? "",
-      });
-      lastClickDateRef.current = clickDate;
-    } catch (error) {
-      errorTracker.captureException(error as Error);
-    }
-  };
+  const handleClick = useCallback(
+    async (clickDate: string) => {
+      try {
+        await persist({
+          lastClickDate: clickDate,
+          lastFailedAttemptDate: lastFailedAttemptDateRef.current ?? "",
+        });
+        lastClickDateRef.current = clickDate;
+      } catch (error) {
+        errorTracker.captureException(error as Error);
+      }
+    },
+    [persist],
+  );
 
-  const handleFailedAttempt = async (failedAttemptDate: string) => {
-    try {
-      await persist({
-        lastClickDate: lastClickDateRef.current ?? "",
-        lastFailedAttemptDate: failedAttemptDate,
-      });
-      lastFailedAttemptDateRef.current = failedAttemptDate;
+  const handleFailedAttempt = useCallback(
+    async (failedAttemptDate: string) => {
+      try {
+        await persist({
+          lastClickDate: lastClickDateRef.current ?? "",
+          lastFailedAttemptDate: failedAttemptDate,
+        });
+        lastFailedAttemptDateRef.current = failedAttemptDate;
 
-      // Show dot if no clicks or failed attempt is newer
-      if (!lastClickDateRef.current || failedAttemptDate > lastClickDateRef.current) {
-        setHasProblems(true);
+        // Show dot if no clicks or failed attempt is newer
+        if (!lastClickDateRef.current || failedAttemptDate > lastClickDateRef.current) {
+          setHasProblems(true);
+        }
+      } catch (error) {
+        errorTracker.captureException(error as Error);
       }
-    } catch (error) {
-      errorTracker.captureException(error as Error);
-    }
-  };
+    },
+    [persist],
+  );
 
   return {
     handleAppsListItemClick: handleClick,

src/extensions/components/AppAlerts/useSidebarWebhookAlertMetadata.ts

@@ -1,6 +1,6 @@
 import { useUser } from "@dashboard/auth/useUser";
 import { type MetadataInput, useUserAccountUpdateMutation } from "@dashboard/graphql";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 
 export const DELIVERY_ATTEMPT_KEY = "sidebar_app_webhook_alert_state";
 
@@ -19,20 +19,23 @@ export const useSidebarWebhookAlertMetadata = (): SidebarWebhookAlertMetadata =>
 
   const [saveMetadata] = useUserAccountUpdateMutation();
 
-  const persist = async (metadataInput: Record<string, string>) => {
-    await saveMetadata({
-      variables: {
-        input: {
-          metadata: [
-            {
-              key: DELIVERY_ATTEMPT_KEY,
-              value: JSON.stringify(metadataInput),
-            } satisfies MetadataInput,
-          ],
+  const persist = useCallback(
+    async (metadataInput: Record<string, string>) => {
+      await saveMetadata({
+        variables: {
+          input: {
+            metadata: [
+              {
+                key: DELIVERY_ATTEMPT_KEY,
+                value: JSON.stringify(metadataInput),
+              } satisfies MetadataInput,
+            ],
+          },
         },
-      },
-    });
-  };
+      });
+    },
+    [saveMetadata],
+  );
 
   const sidebarDotRemoteState = useMemo(() => {
     const webhookAlertMetadata = user?.metadata.find(m => m.key === DELIVERY_ATTEMPT_KEY) ?? null;