optimizations

interface/src/components/routing/BlockNavigation.tsx

@@ -1,3 +1,4 @@
+import { memo, useCallback } from 'react';
 import type { Blocker } from 'react-router';
 
 import {
@@ -14,23 +15,23 @@ import { useI18nContext } from 'i18n/i18n-react';
 const BlockNavigation = ({ blocker }: { blocker: Blocker }) => {
   const { LL } = useI18nContext();
 
+  const handleReset = useCallback(() => {
+    blocker.reset?.();
+  }, [blocker]);
+
+  const handleProceed = useCallback(() => {
+    blocker.proceed?.();
+  }, [blocker]);
+
   return (
     <Dialog sx={dialogStyle} open={blocker.state === 'blocked'}>
       <DialogTitle>{LL.BLOCK_NAVIGATE_1()}</DialogTitle>
       <DialogContent dividers>{LL.BLOCK_NAVIGATE_2()}</DialogContent>
       <DialogActions>
-        <Button
-          variant="outlined"
-          onClick={() => blocker.reset?.()}
-          color="secondary"
-        >
+        <Button variant="outlined" onClick={handleReset} color="secondary">
           {LL.STAY()}
         </Button>
-        <Button
-          variant="contained"
-          onClick={() => blocker.proceed?.()}
-          color="primary"
-        >
+        <Button variant="contained" onClick={handleProceed} color="primary">
           {LL.LEAVE()}
         </Button>
       </DialogActions>
@@ -38,4 +39,4 @@ const BlockNavigation = ({ blocker }: { blocker: Blocker }) => {
   );
 };
 
-export default BlockNavigation;
+export default memo(BlockNavigation);

interface/src/components/routing/RequireAdmin.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { memo, useContext } from 'react';
 import type { FC } from 'react';
 import { Navigate } from 'react-router';
 
@@ -14,4 +14,4 @@ const RequireAdmin: FC<RequiredChildrenProps> = ({ children }) => {
   );
 };
 
-export default RequireAdmin;
+export default memo(RequireAdmin);

interface/src/components/routing/RequireAuthenticated.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from 'react';
+import { memo, useContext, useEffect } from 'react';
 import type { FC } from 'react';
 import { Navigate, useLocation } from 'react-router';
 
@@ -18,7 +18,7 @@ const RequireAuthenticated: FC<RequiredChildrenProps> = ({ children }) => {
     if (!authenticationContext.me) {
       storeLoginRedirect(location);
     }
-  });
+  }, [authenticationContext.me, location]);
 
   return authenticationContext.me ? (
     <AuthenticatedContext.Provider
@@ -31,4 +31,4 @@ const RequireAuthenticated: FC<RequiredChildrenProps> = ({ children }) => {
   );
 };
 
-export default RequireAuthenticated;
+export default memo(RequireAuthenticated);

interface/src/components/routing/RequireUnauthenticated.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { memo, useContext } from 'react';
 import type { FC } from 'react';
 import { Navigate } from 'react-router';
 
@@ -16,4 +16,4 @@ const RequireUnauthenticated: FC<RequiredChildrenProps> = ({ children }) => {
   );
 };
 
-export default RequireUnauthenticated;
+export default memo(RequireUnauthenticated);

interface/src/components/routing/RouterTabs.tsx

@@ -1,3 +1,4 @@
+import { memo, useCallback } from 'react';
 import type { FC } from 'react';
 import { useNavigate } from 'react-router';
 
@@ -15,9 +16,12 @@ const RouterTabs: FC<RouterTabsProps> = ({ value, children }) => {
   const theme = useTheme();
   const smallDown = useMediaQuery(theme.breakpoints.down('sm'));
 
-  const handleTabChange = (_event: unknown, path: string) => {
-    void navigate(path);
-  };
+  const handleTabChange = useCallback(
+    (_event: unknown, path: string) => {
+      void navigate(path);
+    },
+    [navigate]
+  );
 
   return (
     <Tabs
@@ -30,4 +34,4 @@ const RouterTabs: FC<RouterTabsProps> = ({ value, children }) => {
   );
 };
 
-export default RouterTabs;
+export default memo(RouterTabs);

interface/src/components/routing/authentication.ts

@@ -13,8 +13,14 @@ export const verifyAuthorization = () =>
 export const signIn = (request: SignInRequest) =>
   alovaInstance.Post<SignInResponse>('/rest/signIn', request);
 
+// Cache storage reference to avoid repeated checks
+let cachedStorage: Storage | undefined;
+
 export function getStorage() {
-  return localStorage || sessionStorage;
+  if (!cachedStorage) {
+    cachedStorage = localStorage || sessionStorage;
+  }
+  return cachedStorage;
 }
 
 export function storeLoginRedirect(location?: { pathname: string; search: string }) {