Fix Infinite loop on invite route (#2866)

front/src/effect-components/PageChangeEffect.tsx

@@ -47,7 +47,9 @@ export const PageChangeEffect = () => {
     } else {
       return;
     }
+  }, [location, previousLocation]);
 
+  useEffect(() => {
     const isMachinOngoingUserCreationRoute =
       isMatchingLocation(AppPath.SignUp) ||
       isMatchingLocation(AppPath.SignIn) ||
@@ -108,7 +110,16 @@ export const PageChangeEffect = () => {
         },
       });
     }
+  }, [
+    enqueueSnackBar,
+    isMatchingLocation,
+    location.pathname,
+    navigate,
+    onboardingStatus,
+    workspaceFromInviteHashQuery,
+  ]);
 
+  useEffect(() => {
     switch (true) {
       case isMatchingLocation(AppPath.RecordTablePage): {
         setHotkeyScope(TableHotkeyScope.Table, {
@@ -177,7 +188,9 @@ export const PageChangeEffect = () => {
         break;
       }
     }
+  }, [isMatchingLocation, setHotkeyScope]);
 
+  useEffect(() => {
     setToIntitialCommandMenu();
 
     addToCommandMenu([
@@ -190,7 +203,9 @@ export const PageChangeEffect = () => {
         onCommandClick: () => openCreateActivity({ type: 'Task' }),
       },
     ]);
+  }, [addToCommandMenu, setToIntitialCommandMenu, openCreateActivity]);
 
+  useEffect(() => {
     setTimeout(() => {
       eventTracker('pageview', {
         location: {
@@ -198,20 +213,7 @@ export const PageChangeEffect = () => {
         },
       });
     }, 500);
-  }, [
+  }, [eventTracker, location.pathname]);
-    onboardingStatus,
-    navigate,
-    isMatchingLocation,
-    setHotkeyScope,
-    location,
-    previousLocation,
-    eventTracker,
-    workspaceFromInviteHashQuery,
-    enqueueSnackBar,
-    addToCommandMenu,
-    openCreateActivity,
-    setToIntitialCommandMenu,
-  ]);
 
   return <></>;
 };

front/src/hooks/useIsMatchingLocation.ts

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { matchPath, useLocation } from 'react-router-dom';
 import { parse } from 'url';
 
@@ -6,11 +7,14 @@ import { AppBasePath } from '@/types/AppBasePath';
 export const useIsMatchingLocation = () => {
   const location = useLocation();
 
-  return (path: string, basePath?: AppBasePath) => {
+  return useCallback(
+    (path: string, basePath?: AppBasePath) => {
       const constructedPath = basePath
         ? parse(`${basePath}/${path}`).pathname ?? ''
         : path;
 
       return !!matchPath(constructedPath, location.pathname);
-  };
+    },
+    [location.pathname],
+  );
 };

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,7 +33,8 @@ export const useOpenCreateActivityDrawer = () => {
   );
   const [, setViewableActivityId] = useRecoilState(viewableActivityIdState);
 
-  return async ({
+  return useCallback(
+    async ({
       type,
       targetableEntities,
       assigneeId,
@@ -74,5 +76,12 @@ export const useOpenCreateActivityDrawer = () => {
       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[]) => {
+  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 = (
+  const enqueueSnackBar = useCallback(
-    message: string,
+    (message: string, options?: Omit<SnackBarOptions, 'message' | 'id'>) => {
-    options?: Omit<SnackBarOptions, 'message' | 'id'>,
-  ) => {
       setSnackBarQueue({
         id: uuidv4(),
         message,
         ...options,
       });
-  };
+    },
+    [setSnackBarQueue],
+  );
 
   return { handleSnackBarClose, enqueueSnackBar };
 };