Fix Infinite loop on invite route (#2866)

front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
@@ -32,47 +33,55 @@ export const useOpenCreateActivityDrawer = () => {
   );
   const [, setViewableActivityId] = useRecoilState(viewableActivityIdState);
 
-  return async ({
-    type,
-    targetableEntities,
-    assigneeId,
-  }: {
-    type: ActivityType;
-    targetableEntities?: ActivityTargetableEntity[];
-    assigneeId?: string;
-  }) => {
-    const targetableEntitiesWithRelations = targetableEntities
-      ? getTargetableEntitiesWithParents(targetableEntities)
-      : [];
+  return useCallback(
+    async ({
+      type,
+      targetableEntities,
+      assigneeId,
+    }: {
+      type: ActivityType;
+      targetableEntities?: ActivityTargetableEntity[];
+      assigneeId?: string;
+    }) => {
+      const targetableEntitiesWithRelations = targetableEntities
+        ? getTargetableEntitiesWithParents(targetableEntities)
+        : [];
 
-    const createdActivity = await createOneActivity?.({
-      authorId: currentWorkspaceMember?.id,
-      assigneeId:
-        assigneeId ?? isNonEmptyString(currentWorkspaceMember?.id)
-          ? currentWorkspaceMember?.id
-          : undefined,
-      type: type,
-    });
+      const createdActivity = await createOneActivity?.({
+        authorId: currentWorkspaceMember?.id,
+        assigneeId:
+          assigneeId ?? isNonEmptyString(currentWorkspaceMember?.id)
+            ? currentWorkspaceMember?.id
+            : undefined,
+        type: type,
+      });
 
-    if (!createdActivity) {
-      return;
-    }
+      if (!createdActivity) {
+        return;
+      }
 
-    await Promise.all(
-      targetableEntitiesWithRelations.map(async (targetableEntity) => {
-        await createOneActivityTarget?.({
-          companyId:
-            targetableEntity.type === 'Company' ? targetableEntity.id : null,
-          personId:
-            targetableEntity.type === 'Person' ? targetableEntity.id : null,
-          activityId: createdActivity.id,
-        });
-      }),
-    );
+      await Promise.all(
+        targetableEntitiesWithRelations.map(async (targetableEntity) => {
+          await createOneActivityTarget?.({
+            companyId:
+              targetableEntity.type === 'Company' ? targetableEntity.id : null,
+            personId:
+              targetableEntity.type === 'Person' ? targetableEntity.id : null,
+            activityId: createdActivity.id,
+          });
+        }),
+      );
 
-    setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
-    setViewableActivityId(createdActivity.id);
-    setActivityTargetableEntityArray(targetableEntities ?? []);
-    openRightDrawer(RightDrawerPages.CreateActivity);
-  };
+      setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
+      setViewableActivityId(createdActivity.id);
+      setActivityTargetableEntityArray(targetableEntities ?? []);
+      openRightDrawer(RightDrawerPages.CreateActivity);
+    },
+    [
+      openRightDrawer,
+      setActivityTargetableEntityArray,
+      setHotkeyScope,
+      setViewableActivityId,
+    ],
+  );
 };

front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { useRecoilCallback, useSetRecoilState } from 'recoil';
 
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
@@ -38,9 +39,12 @@ export const useCommandMenu = () => {
     }
   });
 
-  const addToCommandMenu = (addCommand: Command[]) => {
-    setCommands((prev) => [...prev, ...addCommand]);
-  };
+  const addToCommandMenu = useCallback(
+    (addCommand: Command[]) => {
+      setCommands((prev) => [...prev, ...addCommand]);
+    },
+    [setCommands],
+  );
 
   const setToIntitialCommandMenu = () => {
     setCommands(commandMenuCommands);

front/src/modules/ui/feedback/snack-bar-manager/hooks/useSnackBar.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { useRecoilCallback } from 'recoil';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -36,18 +37,19 @@ export const useSnackBar = () => {
             queue: [...prev.queue, newValue] as SnackBarOptions[],
           };
         }),
+    [scopeId],
   );
 
-  const enqueueSnackBar = (
-    message: string,
-    options?: Omit<SnackBarOptions, 'message' | 'id'>,
-  ) => {
-    setSnackBarQueue({
-      id: uuidv4(),
-      message,
-      ...options,
-    });
-  };
+  const enqueueSnackBar = useCallback(
+    (message: string, options?: Omit<SnackBarOptions, 'message' | 'id'>) => {
+      setSnackBarQueue({
+        id: uuidv4(),
+        message,
+        ...options,
+      });
+    },
+    [setSnackBarQueue],
+  );
 
   return { handleSnackBarClose, enqueueSnackBar };
 };