Remove useMemo/useCallback across the web UI

interface/src/App.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { ToastContainer, Zoom } from 'react-toastify';
 
 import AppRouting from 'AppRouting';
@@ -46,19 +46,17 @@ const App = memo(() => {
   const [wasLoaded, setWasLoaded] = useState(false);
   const [locale, setLocale] = useState<Locales>('en');
 
-  // Memoize locale initialization to prevent unnecessary re-runs
-  const initializeLocale = useCallback(async () => {
-    const browserLocale = detectLocale('en', AVAILABLE_LOCALES, navigatorDetector);
-    const newLocale = (localStorage.getItem('lang') || browserLocale) as Locales;
-    localStorage.setItem('lang', newLocale);
-    setLocale(newLocale);
-    await loadLocaleAsync(newLocale);
-    setWasLoaded(true);
-  }, []);
-
   useEffect(() => {
+    const initializeLocale = async () => {
+      const browserLocale = detectLocale('en', AVAILABLE_LOCALES, navigatorDetector);
+      const newLocale = (localStorage.getItem('lang') || browserLocale) as Locales;
+      localStorage.setItem('lang', newLocale);
+      setLocale(newLocale);
+      await loadLocaleAsync(newLocale);
+      setWasLoaded(true);
+    };
     void initializeLocale();
-  }, [initializeLocale]);
+  }, []);
 
   if (!wasLoaded) return null;
 

interface/src/SignIn.tsx

@@ -43,7 +43,6 @@ const SignIn = memo(() => {
     }
   });
 
-  // Memoize callback to prevent recreation on every render
   const updateLoginRequestValue = useMemo(
     () =>
       updateValue((updater) =>
@@ -65,7 +64,7 @@ const SignIn = memo(() => {
     });
   }, [callSignIn, signInRequest, LL]);
 
-  const validateAndSignIn = useCallback(async () => {
+  const validateAndSignIn = async () => {
     setProcessing(true);
     SIGN_IN_REQUEST_VALIDATOR.messages({
       required: LL.IS_REQUIRED('%s')
@@ -77,7 +76,7 @@ const SignIn = memo(() => {
       setFieldErrors((error as ValidationError).fieldErrors);
       setProcessing(false);
     }
-  }, [signInRequest, signIn, LL]);
+  };
 
   const submitOnEnter = useMemo(() => onEnterCallback(signIn), [signIn]);
 

interface/src/app/main/CustomEntities.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useState } from 'react';
 import { useBlocker } from 'react-router';
 import { toast } from 'react-toastify';
 
@@ -57,20 +57,18 @@ const CustomEntities = () => {
     initialData: []
   });
 
-  const intervalCallback = useCallback(() => {
+  useInterval(() => {
     if (!dialogOpen && !numChanges) {
       void fetchEntities();
     }
-  }, [dialogOpen, numChanges, fetchEntities]);
+  });
-
-  useInterval(intervalCallback);
 
   const { send: writeEntities } = useRequest(
     (data: Entities) => writeCustomEntities(data),
     { immediate: false }
   );
 
-  const hasEntityChanged = useCallback((ei: EntityItem) => {
+  const hasEntityChanged = (ei: EntityItem) => {
     return (
       ei.id !== ei.o_id ||
       ei.ram !== ei.o_ram ||
@@ -86,21 +84,19 @@ const CustomEntities = () => {
       ei.deleted !== ei.o_deleted ||
       (ei.value || '') !== (ei.o_value || '')
     );
-  }, []);
+  };
 
-  const entity_theme = useMemo(
+  const entity_theme = useTheme({
-    () =>
+    Table: `
-      useTheme({
-        Table: `
       --data-table-library_grid-template-columns: repeat(1, minmax(60px, 1fr)) minmax(80px, auto) 80px 80px 80px 120px;
     `,
-        BaseRow: `
+    BaseRow: `
       font-size: 14px;
       .td {
         height: 32px;
       }
     `,
-        BaseCell: `
+    BaseCell: `
       &:nth-of-type(1) {
         padding: 8px;
       }
@@ -120,7 +116,7 @@ const CustomEntities = () => {
         text-align: center;
       }
     `,
-        HeaderRow: `
+    HeaderRow: `
       text-transform: uppercase;
       background-color: black;
       color: #90CAF9;
@@ -129,7 +125,7 @@ const CustomEntities = () => {
         height: 36px;
       }
     `,
-        Row: `
+    Row: `
       background-color: #1e1e1e;
       position: relative;
       cursor: pointer;
@@ -140,11 +136,9 @@ const CustomEntities = () => {
         background-color: #177ac9;
       }
     `
-      }),
+  });
-    []
-  );
 
-  const saveEntities = useCallback(async () => {
+  const saveEntities = async () => {
     await writeEntities({
       entities: entities
         .filter((ei: EntityItem) => !ei.deleted)
@@ -173,44 +167,41 @@ const CustomEntities = () => {
         await fetchEntities();
         setNumChanges(0);
       });
-  }, [entities, writeEntities, LL, fetchEntities]);
+  };
 
-  const editEntityItem = useCallback((ei: EntityItem) => {
+  const editEntityItem = (ei: EntityItem) => {
     setCreating(false);
     setSelectedEntityItem(ei);
     setDialogOpen(true);
-  }, []);
+  };
 
-  const onDialogClose = useCallback(() => {
+  const onDialogClose = () => {
     setDialogOpen(false);
-  }, []);
+  };
 
-  const onDialogCancel = useCallback(async () => {
+  const onDialogCancel = async () => {
     await fetchEntities().then(() => {
       setNumChanges(0);
     });
-  }, [fetchEntities]);
+  };
 
-  const onDialogSave = useCallback(
+  const onDialogSave = (updatedItem: EntityItem) => {
-    (updatedItem: EntityItem) => {
+    setDialogOpen(false);
-      setDialogOpen(false);
+    void updateState(readCustomEntities(), (data: EntityItem[]) => {
-      void updateState(readCustomEntities(), (data: EntityItem[]) => {
+      const new_data = creating
-        const new_data = creating
+        ? [
-          ? [
+            ...data.filter((ei) => creating || ei.o_id !== updatedItem.o_id),
-              ...data.filter((ei) => creating || ei.o_id !== updatedItem.o_id),
+            updatedItem
-              updatedItem
+          ]
-            ]
+        : data.map((ei) =>
-          : data.map((ei) =>
+            ei.id === updatedItem.id ? { ...ei, ...updatedItem } : ei
-              ei.id === updatedItem.id ? { ...ei, ...updatedItem } : ei
+          );
-            );
+      setNumChanges(new_data.filter((ei) => hasEntityChanged(ei)).length);
-        setNumChanges(new_data.filter((ei) => hasEntityChanged(ei)).length);
+      return new_data;
-        return new_data;
+    });
-      });
+  };
-    },
-    [creating, hasEntityChanged]
-  );
 
-  const onDialogDup = useCallback((item: EntityItem) => {
+  const onDialogDup = (item: EntityItem) => {
     setCreating(true);
     setSelectedEntityItem({
       id: Math.floor(Math.random() * (MAX_ID - MIN_ID) + MIN_ID),
@@ -228,9 +219,9 @@ const CustomEntities = () => {
       value: item.value
     });
     setDialogOpen(true);
-  }, []);
+  };
 
-  const addEntityItem = useCallback(() => {
+  const addEntityItem = () => {
     setCreating(true);
     setSelectedEntityItem({
       id: Math.floor(Math.random() * (MAX_ID - MIN_ID) + MIN_ID),
@@ -248,30 +239,27 @@ const CustomEntities = () => {
       value: ''
     });
     setDialogOpen(true);
-  }, []);
+  };
 
-  const formatValue = useCallback((value: unknown, uom: number) => {
+  const formatValue = (value: unknown, uom: number) => {
     return value === undefined
       ? ''
       : typeof value === 'number'
         ? new Intl.NumberFormat().format(value) +
           (uom === 0 ? '' : ` ${DeviceValueUOM_s[uom]}`)
         : `${value as string}${uom === 0 ? '' : ` ${DeviceValueUOM_s[uom]}`}`;
-  }, []);
+  };
 
-  const showHex = useCallback((value: number, digit: number) => {
+  const showHex = (value: number, digit: number) => {
     return `0x${value.toString(16).toUpperCase().padStart(digit, '0')}`;
-  }, []);
+  };
 
-  const filteredAndSortedEntities = useMemo(
+  const filteredAndSortedEntities =
-    () =>
+    entities
-      entities
+      ?.filter((ei: EntityItem) => !ei.deleted)
-        ?.filter((ei: EntityItem) => !ei.deleted)
+      .sort((a: EntityItem, b: EntityItem) => a.name.localeCompare(b.name)) ?? [];
-        .sort((a: EntityItem, b: EntityItem) => a.name.localeCompare(b.name)) ?? [],
-    [entities]
-  );
 
-  const renderEntity = useCallback(() => {
+  const renderEntity = () => {
     if (!entities) {
       return (
         <FormLoader onRetry={fetchEntities} errorMessage={error?.message || ''} />
@@ -328,17 +316,7 @@ const CustomEntities = () => {
         )}
       </Table>
     );
-  }, [
+  };
-    entities,
-    error,
-    fetchEntities,
-    entity_theme,
-    editEntityItem,
-    LL,
-    filteredAndSortedEntities,
-    showHex,
-    formatValue
-  ]);
 
   return (
     <SectionContent>

interface/src/app/main/CustomEntitiesDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import AddIcon from '@mui/icons-material/Add';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -68,6 +68,7 @@ const CustomEntitiesDialog = ({
   const { LL } = useI18nContext();
   const [editItem, setEditItem] = useState<EntityItem>(selectedItem);
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+  // Stable handler reference so the memoized ValidatedTextField can skip re-renders
   const updateFormValue = useMemo(
     () =>
       updateValue(
@@ -105,16 +106,16 @@ const CustomEntitiesDialog = ({
     }
   }, [open, selectedItem]);
 
-  const handleClose = useCallback(
+  const handleClose = (
-    (_event: React.SyntheticEvent, reason: 'backdropClick' | 'escapeKeyDown') => {
+    _event: React.SyntheticEvent,
-      if (reason !== 'backdropClick') {
+    reason: 'backdropClick' | 'escapeKeyDown'
-        onClose();
+  ) => {
-      }
+    if (reason !== 'backdropClick') {
-    },
+      onClose();
-    [onClose]
+    }
-  );
+  };
 
-  const save = useCallback(async () => {
+  const save = async () => {
     try {
       setFieldErrors(undefined);
       await validate(validator, editItem);
@@ -138,27 +139,21 @@ const CustomEntitiesDialog = ({
     } catch (error) {
       setFieldErrors((error as ValidationError).fieldErrors);
     }
-  }, [validator, editItem, onSave]);
+  };
 
-  const remove = useCallback(() => {
+  const remove = () => {
-    const itemWithDeleted = { ...editItem, deleted: true };
+    onSave({ ...editItem, deleted: true });
-    onSave(itemWithDeleted);
+  };
-  }, [editItem, onSave]);
 
-  const dup = useCallback(() => {
+  const dup = () => {
     onDup(editItem);
-  }, [editItem, onDup]);
+  };
 
-  // Memoize UOM menu items to avoid recreating on every render
+  const uomMenuItems = DeviceValueUOM_s.map((val, i) => (
-  const uomMenuItems = useMemo(
+    <MenuItem key={val} value={i}>
-    () =>
+      {val}
-      DeviceValueUOM_s.map((val, i) => (
+    </MenuItem>
-        <MenuItem key={val} value={i}>
+  ));
-          {val}
-        </MenuItem>
-      )),
-    []
-  );
 
   return (
     <Dialog sx={dialogStyle} open={open} onClose={handleClose}>

interface/src/app/main/Customizations.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useBlocker, useLocation } from 'react-router';
 import { toast } from 'react-toastify';
 
@@ -171,19 +171,17 @@ const Customizations = () => {
     );
   };
 
-  const entities_theme = useMemo(
+  const entities_theme = useTheme({
-    () =>
+    Table: `
-      useTheme({
-        Table: `
       --data-table-library_grid-template-columns: 156px repeat(1, minmax(80px, 1fr)) 45px minmax(45px, auto) minmax(120px, auto);
     `,
-        BaseRow: `
+    BaseRow: `
       font-size: 14px;
       .td {
         height: 32px;
       }
     `,
-        BaseCell: `
+    BaseCell: `
       &:nth-of-type(3) {
         text-align: right;
       }
@@ -194,7 +192,7 @@ const Customizations = () => {
         text-align: right;
       }
     `,
-        HeaderRow: `
+    HeaderRow: `
       text-transform: uppercase;
       background-color: black;
       color: #90CAF9;
@@ -206,7 +204,7 @@ const Customizations = () => {
         text-align: center;
       }
     `,
-        Row: `
+    Row: `
       background-color: #1e1e1e;
       position: relative;
       cursor: pointer;
@@ -222,7 +220,7 @@ const Customizations = () => {
         background-color: #177ac9;
       }
     `,
-        Cell: `
+    Cell: `
       &:nth-of-type(2) {
         padding: 8px;
       }
@@ -236,9 +234,7 @@ const Customizations = () => {
         padding-right: 8px;
       }
     `
-      }),
+  });
-    []
-  );
 
   function hasEntityChanged(de: DeviceEntity) {
     return (
@@ -287,26 +283,23 @@ const Customizations = () => {
     return value as string;
   }
 
-  const isCommand = useCallback((de: DeviceEntity) => {
+  const isCommand = (de: DeviceEntity) => {
     return de.n && de.n[0] === '!';
-  }, []);
+  };
 
-  const formatName = useCallback(
+  const formatName = (de: DeviceEntity, withShortname: boolean) => {
-    (de: DeviceEntity, withShortname: boolean) => {
+    let name: string;
-      let name: string;
+    if (isCommand(de)) {
-      if (isCommand(de)) {
+      name = de.t
-        name = de.t
+        ? `${LL.COMMAND(1)}: ${de.t} ${de.n?.slice(1)}`
-          ? `${LL.COMMAND(1)}: ${de.t} ${de.n?.slice(1)}`
+        : `${LL.COMMAND(1)}: ${de.n?.slice(1)}`;
-          : `${LL.COMMAND(1)}: ${de.n?.slice(1)}`;
+    } else if (de.cn && de.cn !== '') {
-      } else if (de.cn && de.cn !== '') {
+      name = de.t ? `${de.t} ${de.cn}` : de.cn;
-        name = de.t ? `${de.t} ${de.cn}` : de.cn;
+    } else {
-      } else {
+      name = de.t ? `${de.t} ${de.n}` : de.n || '';
-        name = de.t ? `${de.t} ${de.n}` : de.n || '';
+    }
-      }
+    return withShortname ? `${name} ${de.id}` : name;
-      return withShortname ? `${name} ${de.id}` : name;
+  };
-    },
-    [LL]
-  );
 
   const getMaskNumber = (newMask: string[]) => {
     let new_mask = 0;
@@ -336,33 +329,27 @@ const Customizations = () => {
     return new_masks;
   };
 
-  const filter_entity = useCallback(
+  const filter_entity = (de: DeviceEntity) =>
-    (de: DeviceEntity) =>
+    (de.m & selectedFilters || !selectedFilters) &&
-      (de.m & selectedFilters || !selectedFilters) &&
+    formatName(de, true).toLowerCase().includes(search.toLowerCase());
-      formatName(de, true).toLowerCase().includes(search.toLowerCase()),
-    [selectedFilters, search, formatName]
-  );
 
-  const maskDisabled = useCallback(
+  const maskDisabled = (set: boolean) => {
-    (set: boolean) => {
+    setDeviceEntities((prev) =>
-      setDeviceEntities((prev) =>
+      prev.map((de) => {
-        prev.map((de) => {
+        if (filter_entity(de)) {
-          if (filter_entity(de)) {
+          const excludeMask =
-            const excludeMask =
+            DeviceEntityMask.DV_API_MQTT_EXCLUDE | DeviceEntityMask.DV_WEB_EXCLUDE;
-              DeviceEntityMask.DV_API_MQTT_EXCLUDE | DeviceEntityMask.DV_WEB_EXCLUDE;
+          return {
-            return {
+            ...de,
-              ...de,
+            m: set ? de.m | excludeMask : de.m & ~excludeMask
-              m: set ? de.m | excludeMask : de.m & ~excludeMask
+          };
-            };
+        }
-          }
+        return de;
-          return de;
+      })
-        })
+    );
-      );
+  };
-    },
-    [filter_entity]
-  );
 
-  const resetCustomization = useCallback(async () => {
+  const resetCustomization = async () => {
     try {
       await sendResetCustomizations();
       toast.info(LL.CUSTOMIZATIONS_RESTART());
@@ -372,30 +359,27 @@ const Customizations = () => {
       setConfirmReset(false);
       setRestarting(true);
     }
-  }, [sendResetCustomizations, LL]);
+  };
 
   const onDialogClose = () => {
     setDialogOpen(false);
   };
 
-  const updateDeviceEntity = useCallback((updatedItem: DeviceEntity) => {
+  const updateDeviceEntity = (updatedItem: DeviceEntity) => {
     setDeviceEntities(
       (prev) =>
         prev?.map((de) =>
           de.id === updatedItem.id ? { ...de, ...updatedItem } : de
         ) ?? []
     );
-  }, []);
+  };
 
-  const onDialogSave = useCallback(
+  const onDialogSave = (updatedItem: DeviceEntity) => {
-    (updatedItem: DeviceEntity) => {
+    setDialogOpen(false);
-      setDialogOpen(false);
+    updateDeviceEntity(updatedItem);
-      updateDeviceEntity(updatedItem);
+  };
-    },
-    [updateDeviceEntity]
-  );
 
-  const editDeviceEntity = useCallback((de: DeviceEntity) => {
+  const editDeviceEntity = (de: DeviceEntity) => {
     if (de.n === undefined || (de.n && de.n[0] === '!')) {
       return;
     }
@@ -406,9 +390,9 @@ const Customizations = () => {
 
     setSelectedDeviceEntity(de);
     setDialogOpen(true);
-  }, []);
+  };
 
-  const saveCustomization = useCallback(async () => {
+  const saveCustomization = async () => {
     if (!devices || !deviceEntities || selectedDevice === -1) {
       return;
     }
@@ -441,9 +425,9 @@ const Customizations = () => {
       .finally(() => {
         setOriginalSettings(deviceEntities);
       });
-  }, [devices, deviceEntities, selectedDevice, sendCustomizationEntities, LL]);
+  };
 
-  const renameDevice = useCallback(async () => {
+  const renameDevice = async () => {
     await sendDeviceName({
       id: selectedDevice,
       name: selectedDeviceName,
@@ -459,14 +443,7 @@ const Customizations = () => {
         setRename(false);
         await fetchCoreData();
       });
-  }, [
+  };
-    selectedDevice,
-    selectedDeviceName,
-    selectedDeviceBrand,
-    sendDeviceName,
-    LL,
-    fetchCoreData
-  ]);
 
   const renderDeviceList = () => (
     <>
@@ -562,10 +539,7 @@ const Customizations = () => {
     </>
   );
 
-  const filteredEntities = useMemo(
+  const filteredEntities = deviceEntities.filter((de) => filter_entity(de));
-    () => deviceEntities.filter((de) => filter_entity(de)),
-    [deviceEntities, filter_entity]
-  );
 
   const renderDeviceData = () => {
     return (

interface/src/app/main/CustomizationsDialog.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import CloseIcon from '@mui/icons-material/Close';
@@ -57,23 +57,16 @@ const CustomizationsDialog = ({
   const [editItem, setEditItem] = useState<DeviceEntity>(selectedItem);
   const [error, setError] = useState<boolean>(false);
 
-  const updateFormValue = useMemo(
+  const updateFormValue = updateValue(
-    () =>
+    setEditItem as unknown as React.Dispatch<
-      updateValue(
+      React.SetStateAction<Record<string, unknown>>
-        setEditItem as unknown as React.Dispatch<
+    >
-          React.SetStateAction<Record<string, unknown>>
-        >
-      ),
-    []
   );
 
-  const isWriteableNumber = useMemo(
+  const isWriteableNumber =
-    () =>
+    typeof editItem.v === 'number' &&
-      typeof editItem.v === 'number' &&
+    editItem.w &&
-      editItem.w &&
+    !(editItem.m & DeviceEntityMask.DV_READONLY);
-      !(editItem.m & DeviceEntityMask.DV_READONLY),
-    [editItem.v, editItem.w, editItem.m]
-  );
 
   useEffect(() => {
     if (open) {
@@ -82,16 +75,16 @@ const CustomizationsDialog = ({
     }
   }, [open, selectedItem]);
 
-  const handleClose = useCallback(
+  const handleClose = (
-    (_event: React.SyntheticEvent, reason: 'backdropClick' | 'escapeKeyDown') => {
+    _event: React.SyntheticEvent,
-      if (reason !== 'backdropClick') {
+    reason: 'backdropClick' | 'escapeKeyDown'
-        onClose();
+  ) => {
-      }
+    if (reason !== 'backdropClick') {
-    },
+      onClose();
-    [onClose]
+    }
-  );
+  };
 
-  const save = useCallback(() => {
+  const save = () => {
     if (
       isWriteableNumber &&
       editItem.mi &&
@@ -102,34 +95,31 @@ const CustomizationsDialog = ({
     } else {
       onSave(editItem);
     }
-  }, [isWriteableNumber, editItem, onSave]);
+  };
 
-  const updateDeviceEntity = useCallback((updatedItem: DeviceEntity) => {
+  const updateDeviceEntity = (updatedItem: DeviceEntity) => {
     setEditItem((prev) => ({ ...prev, m: updatedItem.m }));
-  }, []);
+  };
-
-  const dialogTitle = useMemo(() => `${LL.EDIT()} ${LL.ENTITY()}`, [LL]);
-
-  const writeableIcon = useMemo(
-    () =>
-      editItem.w ? (
-        <DoneIcon color="success" sx={{ fontSize: ICON_SIZE }} />
-      ) : (
-        <CloseIcon color="error" sx={{ fontSize: ICON_SIZE }} />
-      ),
-    [editItem.w]
-  );
 
   return (
     <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
-      <DialogTitle>{dialogTitle}</DialogTitle>
+      <DialogTitle>{`${LL.EDIT()} ${LL.ENTITY()}`}</DialogTitle>
       <DialogContent dividers>
         <LabelValue label={LL.ID_OF(LL.ENTITY())} value={editItem.id} />
         <LabelValue
           label={`${LL.DEFAULT(1)} ${LL.ENTITY_NAME(1)}`}
           value={editItem.n}
         />
-        <LabelValue label={LL.WRITEABLE()} value={writeableIcon} />
+        <LabelValue
+          label={LL.WRITEABLE()}
+          value={
+            editItem.w ? (
+              <DoneIcon color="success" sx={{ fontSize: ICON_SIZE }} />
+            ) : (
+              <CloseIcon color="error" sx={{ fontSize: ICON_SIZE }} />
+            )
+          }
+        />
 
         <Box sx={{ mt: 1, mb: 2 }}>
           <EntityMaskToggle onUpdate={updateDeviceEntity} de={editItem} />

interface/src/app/main/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { memo, useContext, useEffect, useState } from 'react';
 import { IconContext } from 'react-icons/lib';
 import { Link } from 'react-router';
 import { toast } from 'react-toastify';
@@ -77,40 +77,35 @@ const Dashboard = memo(() => {
     }
   );
 
-  const deviceValueDialogSave = useCallback(
+  const deviceValueDialogSave = async (devicevalue: DeviceValue) => {
-    async (devicevalue: DeviceValue) => {
+    if (!selectedDashboardItem) {
-      if (!selectedDashboardItem) {
+      return;
-        return;
+    }
-      }
+    const id = selectedDashboardItem.parentNode.id; // this is the parent ID
-      const id = selectedDashboardItem.parentNode.id; // this is the parent ID
+    await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v })
-      await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v })
+      .then(() => {
-        .then(() => {
+        toast.success(LL.WRITE_CMD_SENT());
-          toast.success(LL.WRITE_CMD_SENT());
+      })
-        })
+      .catch((error: Error) => {
-        .catch((error: Error) => {
+        toast.error(error.message);
-          toast.error(error.message);
+      })
-        })
+      .finally(() => {
-        .finally(() => {
+        setDeviceValueDialogOpen(false);
-          setDeviceValueDialogOpen(false);
+        setSelectedDashboardItem(undefined);
-          setSelectedDashboardItem(undefined);
+      });
-        });
+  };
-    },
-    [selectedDashboardItem, sendDeviceValue, LL]
-  );
 
-  const dashboard_theme = useMemo(
+  const dashboard_theme = useTheme({
-    () =>
+    Table: `
-      useTheme({
-        Table: `
       --data-table-library_grid-template-columns: minmax(80px, auto) 120px 32px;
     `,
-        BaseRow: `
+    BaseRow: `
       font-size: 14px;
       .td {
         height: 28px;
       }
     `,
-        Row: `
+    Row: `
       cursor: pointer;
       background-color: #1e1e1e;
       &:nth-of-type(odd) .td {
@@ -120,7 +115,7 @@ const Dashboard = memo(() => {
         background-color: #177ac9;
       },
     `,
-        BaseCell: `
+    BaseCell: `
       &:nth-of-type(2) {
         text-align: right;
       }
@@ -128,9 +123,7 @@ const Dashboard = memo(() => {
         text-align: right;
       }
     `
-      }),
+  });
-    []
-  );
 
   const tree = useTree(
     { nodes: [...data.nodes] },
@@ -164,79 +157,64 @@ const Dashboard = memo(() => {
     }
   });
 
-  const nodeIds = useMemo(
-    () => data.nodes.map((item: DashboardItem) => item.id),
-    [data.nodes]
-  );
-
   useEffect(() => {
+    const nodeIds = data.nodes.map((item: DashboardItem) => item.id);
     showAll
       ? tree.fns.onAddAll(nodeIds) // expand tree
       : tree.fns.onRemoveAll(); // collapse tree
   }, [parentNodes]);
 
-  const showType = useCallback(
+  const showType = (n?: string, t?: number) => {
-    (n?: string, t?: number) => {
+    // if we have a name show it
-      // if we have a name show it
+    if (n) {
-      if (n) {
+      return n;
-        return n;
+    }
+    if (t) {
+      // otherwise pick translation based on type
+      switch (t) {
+        case DeviceType.CUSTOM:
+          return LL.CUSTOM_ENTITIES(0);
+        case DeviceType.ANALOGSENSOR:
+          return LL.ANALOG_SENSORS();
+        case DeviceType.TEMPERATURESENSOR:
+          return LL.TEMP_SENSORS();
+        case DeviceType.SCHEDULER:
+          return LL.SCHEDULER();
+        default:
+          break;
       }
-      if (t) {
+    }
-        // otherwise pick translation based on type
+    return '';
-        switch (t) {
+  };
-          case DeviceType.CUSTOM:
-            return LL.CUSTOM_ENTITIES(0);
-          case DeviceType.ANALOGSENSOR:
-            return LL.ANALOG_SENSORS();
-          case DeviceType.TEMPERATURESENSOR:
-            return LL.TEMP_SENSORS();
-          case DeviceType.SCHEDULER:
-            return LL.SCHEDULER();
-          default:
-            break;
-        }
-      }
-      return '';
-    },
-    [LL]
-  );
 
-  const showName = useCallback(
+  const showName = (di: DashboardItem) => {
-    (di: DashboardItem) => {
+    if (di.id < 100) {
-      if (di.id < 100) {
+      // if its a device (parent node) and has entities
-        // if its a device (parent node) and has entities
+      if (di.nodes?.length) {
-        if (di.nodes?.length) {
+        return (
-          return (
+          <span style={{ fontSize: '15px' }}>
-            <span style={{ fontSize: '15px' }}>
+            <DeviceIcon type_id={di.t ?? 0} />
-              <DeviceIcon type_id={di.t ?? 0} />
+            &nbsp;&nbsp;{showType(di.n, di.t)}
-              &nbsp;&nbsp;{showType(di.n, di.t)}
+            <span style={{ color: 'lightblue' }}>&nbsp;({di.nodes?.length})</span>
-              <span style={{ color: 'lightblue' }}>&nbsp;({di.nodes?.length})</span>
+          </span>
-            </span>
+        );
-          );
-        }
       }
-      if (di.dv) {
+    }
-        return <span>{di.dv.id.slice(2)}</span>;
+    if (di.dv) {
-      }
+      return <span>{di.dv.id.slice(2)}</span>;
-      return null;
+    }
-    },
+    return null;
-    [showType]
+  };
-  );
 
-  const hasMask = useCallback(
+  const hasMask = (id: string, mask: number) =>
-    (id: string, mask: number) => (parseInt(id.slice(0, 2), 16) & mask) === mask,
+    (parseInt(id.slice(0, 2), 16) & mask) === mask;
-    []
-  );
 
-  const editDashboardValue = useCallback(
+  const editDashboardValue = (di: DashboardItem) => {
-    (di: DashboardItem) => {
+    if (me.admin && di.dv?.c) {
-      if (me.admin && di.dv?.c) {
+      setSelectedDashboardItem(di);
-        setSelectedDashboardItem(di);
+      setDeviceValueDialogOpen(true);
-        setDeviceValueDialogOpen(true);
+    }
-      }
+  };
-    },
-    [me.admin]
-  );
 
   const handleShowAll = (
     _event: React.MouseEvent<HTMLElement>,
@@ -248,10 +226,9 @@ const Dashboard = memo(() => {
     }
   };
 
-  const hasFavEntities = useMemo(
+  const hasFavEntities = data.nodes.filter(
-    () => data.nodes.filter((item: DashboardItem) => item.id <= 90).length,
+    (item: DashboardItem) => item.id <= 90
-    [data.nodes]
+  ).length;
-  );
 
   const renderContent = () => {
     if (!data) {

interface/src/app/main/Devices.tsx

@@ -4,7 +4,6 @@ import {
   useContext,
   useEffect,
   useLayoutEffect,
-  useMemo,
   useState
 } from 'react';
 import { IconContext } from 'react-icons';
@@ -133,21 +132,19 @@ const Devices = memo(() => {
     };
   }, []);
 
-  const leftOffset = useCallback(() => {
+  const leftOffset = () => {
     const devicesWindow = document.getElementById('devices-window');
     if (!devicesWindow) return 0;
     const { left, right } = devicesWindow.getBoundingClientRect();
     if (!left || !right) return 0;
     return left + (right - left < 400 ? 0 : 200);
-  }, []);
+  };
 
-  const common_theme = useMemo(
+  const common_theme = useTheme({
-    () =>
+    BaseRow: `
-      useTheme({
-        BaseRow: `
       font-size: 14px;
     `,
-        HeaderRow: `
+    HeaderRow: `
       text-transform: uppercase;
       background-color: black;
       color: #90CAF9;
@@ -155,7 +152,7 @@ const Devices = memo(() => {
         border-bottom: 1px solid #565656;
       }
     `,
-        Row: `
+    Row: `
       cursor: pointer;
       background-color: #1E1E1E;
       .td {
@@ -165,88 +162,78 @@ const Devices = memo(() => {
         background-color: #177ac9;
       }
     `
-      }),
+  });
-    []
-  );
 
-  const device_theme = useMemo(
+  const device_theme = useTheme([
-    () =>
+    common_theme,
-      useTheme([
+    {
-        common_theme,
+      BaseRow: `
-        {
+        font-size: 15px;
-          BaseRow: `
+        .td {
-          font-size: 15px;
+         height: 28px;
-          .td {
-           height: 28px;
-          }
-        `,
-          Table: `
-        --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 130px;
-      `,
-          HeaderRow: `
-        .th {
-          padding: 8px;
-      `,
-          Row: `
-        &:nth-of-type(odd) .td {
-            background-color: #303030;
-        },
-        &:hover .td {
-          background-color: #177ac9;
-        },
-      `
-        }
-      ]),
-    [common_theme]
-  );
-
-  const data_theme = useMemo(
-    () =>
-      useTheme([
-        common_theme,
-        {
-          Table: `
-        --data-table-library_grid-template-columns: minmax(200px, auto) minmax(150px, auto) 40px;
-        height: auto;
-        max-height: 100%;
-        overflow-y: scroll;
-        ::-webkit-scrollbar {
-          display:none;
         }
       `,
-          BaseRow: `
+      Table: `
-      .td {
+      --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 130px;
-        height: 32px;
+    `,
-      }
+      HeaderRow: `
-     `,
+      .th {
-          BaseCell: `
+        padding: 8px;
-        &:nth-of-type(1) {
+    `,
-          border-left: 1px solid #177ac9;
+      Row: `
-        },
+      &:nth-of-type(odd) .td {
-        &:nth-of-type(2) {
-          text-align: right;
-        },
-        &:nth-of-type(3) {
-          border-right: 1px solid #177ac9;
-        }
-      `,
-          HeaderRow: `
-        .th {
-          border-top: 1px solid #565656;
-        }
-      `,
-          Row: `
-        &:nth-of-type(odd) .td {
           background-color: #303030;
-        },
+      },
-        &:hover .td {
+      &:hover .td {
-          background-color: #177ac9;
+        background-color: #177ac9;
+      },
+    `
+    }
+  ]);
+
+  const data_theme = useTheme([
+    common_theme,
+    {
+      Table: `
+      --data-table-library_grid-template-columns: minmax(200px, auto) minmax(150px, auto) 40px;
+      height: auto;
+      max-height: 100%;
+      overflow-y: scroll;
+      ::-webkit-scrollbar {
+        display:none;
       }
-      `
+    `,
-        }
+      BaseRow: `
-      ]),
+    .td {
-    [common_theme]
+      height: 32px;
-  );
+    }
+   `,
+      BaseCell: `
+      &:nth-of-type(1) {
+        border-left: 1px solid #177ac9;
+      },
+      &:nth-of-type(2) {
+        text-align: right;
+      },
+      &:nth-of-type(3) {
+        border-right: 1px solid #177ac9;
+      }
+    `,
+      HeaderRow: `
+      .th {
+        border-top: 1px solid #565656;
+      }
+    `,
+      Row: `
+      &:nth-of-type(odd) .td {
+        background-color: #303030;
+      },
+      &:hover .td {
+        background-color: #177ac9;
+    }
+    `
+    }
+  ]);
 
   const getSortIcon = (state: State, sortKey: unknown) => {
     if (state.sortKey === sortKey && state.reverse) {
@@ -345,10 +332,8 @@ const Devices = memo(() => {
     return sc;
   };
 
-  const hasMask = useCallback(
+  const hasMask = (id: string, mask: number) =>
-    (id: string, mask: number) => (parseInt(id.slice(0, 2), 16) & mask) === mask,
+    (parseInt(id.slice(0, 2), 16) & mask) === mask;
-    []
-  );
 
   const handleDownloadCsv = () => {
     const deviceIndex = coreData.devices.findIndex(
@@ -607,41 +592,35 @@ const Devices = memo(() => {
       return;
     }
 
-    const showDeviceValue = useCallback((dv: DeviceValue) => {
+    const showDeviceValue = (dv: DeviceValue) => {
       setSelectedDeviceValue(dv);
       setDeviceValueDialogOpen(true);
-    }, []);
+    };
 
-    const renderNameCell = useCallback(
+    const renderNameCell = (dv: DeviceValue) => (
-      (dv: DeviceValue) => (
+      <>
-        <>
+        {dv.id.slice(2)}&nbsp;
-          {dv.id.slice(2)}&nbsp;
+        {hasMask(dv.id, DeviceEntityMask.DV_FAVORITE) && (
-          {hasMask(dv.id, DeviceEntityMask.DV_FAVORITE) && (
+          <StarIcon color="primary" sx={{ fontSize: 12 }} />
-            <StarIcon color="primary" sx={{ fontSize: 12 }} />
+        )}
-          )}
+        {hasMask(dv.id, DeviceEntityMask.DV_READONLY) && (
-          {hasMask(dv.id, DeviceEntityMask.DV_READONLY) && (
+          <EditOffOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
-            <EditOffOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
+        )}
-          )}
+        {hasMask(dv.id, DeviceEntityMask.DV_API_MQTT_EXCLUDE) && (
-          {hasMask(dv.id, DeviceEntityMask.DV_API_MQTT_EXCLUDE) && (
+          <CommentsDisabledOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
-            <CommentsDisabledOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
+        )}
-          )}
+      </>
-        </>
-      ),
-      [hasMask]
     );
 
-    const shown_data = useMemo(() => {
+    const shown_data = onlyFav
-      if (onlyFav) {
+      ? deviceData.nodes.filter(
-        return deviceData.nodes.filter(
           (dv: DeviceValue) =>
             hasMask(dv.id, DeviceEntityMask.DV_FAVORITE) &&
             dv.id.slice(2).toLowerCase().includes(search.toLowerCase())
+        )
+      : deviceData.nodes.filter((dv: DeviceValue) =>
+          dv.id.slice(2).toLowerCase().includes(search.toLowerCase())
         );
-      }
-      return deviceData.nodes.filter((dv: DeviceValue) =>
-        dv.id.slice(2).toLowerCase().includes(search.toLowerCase())
-      );
-    }, [deviceData.nodes, onlyFav, search]);
 
     const deviceIndex = coreData.devices.findIndex(
       (d: Device) => d.id === device_select.state.id

interface/src/app/main/DevicesDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -52,6 +52,7 @@ const DevicesDialog = ({
   const [editItem, setEditItem] = useState<DeviceValue>(selectedItem);
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
+  // Stable handler reference so the memoized ValidatedTextField can skip re-renders
   const updateFormValue = useMemo(() => updateValue(setEditItem), [setEditItem]);
 
   useEffect(() => {
@@ -61,7 +62,7 @@ const DevicesDialog = ({
     }
   }, [open, selectedItem]);
 
-  const save = useCallback(async () => {
+  const save = async () => {
     try {
       setFieldErrors(undefined);
       await validate(validator, editItem);
@@ -69,28 +70,25 @@ const DevicesDialog = ({
     } catch (error) {
       setFieldErrors((error as ValidationError).fieldErrors);
     }
-  }, [validator, editItem, onSave]);
+  };
 
-  const setUom = useCallback(
+  const setUom = (uom?: DeviceValueUOM) => {
-    (uom?: DeviceValueUOM) => {
+    if (uom === undefined) {
-      if (uom === undefined) {
+      return;
-        return;
+    }
-      }
+    switch (uom) {
-      switch (uom) {
+      case DeviceValueUOM.HOURS:
-        case DeviceValueUOM.HOURS:
+        return LL.HOURS();
-          return LL.HOURS();
+      case DeviceValueUOM.MINUTES:
-        case DeviceValueUOM.MINUTES:
+        return LL.MINUTES();
-          return LL.MINUTES();
+      case DeviceValueUOM.SECONDS:
-        case DeviceValueUOM.SECONDS:
+        return LL.SECONDS();
-          return LL.SECONDS();
+      default:
-        default:
+        return DeviceValueUOM_s[uom];
-          return DeviceValueUOM_s[uom];
+    }
-      }
+  };
-    },
-    [LL]
-  );
 
-  const showHelperText = useCallback((dv: DeviceValue) => {
+  const showHelperText = (dv: DeviceValue) => {
     if (dv.h) return dv.h;
     if (dv.l) return dv.l.join(' | ');
     if (dv.m !== undefined && dv.x !== undefined) {
@@ -101,26 +99,16 @@ const DevicesDialog = ({
       );
     }
     return undefined;
-  }, []);
+  };
 
-  const isCommand = useMemo(
+  const isCommand = selectedItem.v === '' && selectedItem.c;
-    () => selectedItem.v === '' && selectedItem.c,
+  const dialogTitle = isCommand
-    [selectedItem.v, selectedItem.c]
+    ? LL.RUN_COMMAND()
-  );
+    : writeable
-
+      ? LL.CHANGE_VALUE()
-  const dialogTitle = useMemo(() => {
+      : LL.VALUE(0);
-    if (isCommand) return LL.RUN_COMMAND();
+  const buttonLabel = isCommand ? LL.EXECUTE() : LL.UPDATE();
-    return writeable ? LL.CHANGE_VALUE() : LL.VALUE(0);
+  const helperText = showHelperText(editItem);
-  }, [isCommand, writeable, LL]);
-
-  const buttonLabel = useMemo(() => {
-    return isCommand ? LL.EXECUTE() : LL.UPDATE();
-  }, [isCommand, LL]);
-
-  const helperText = useMemo(
-    () => showHelperText(editItem),
-    [editItem, showHelperText]
-  );
 
   const valueLabel = LL.VALUE(0);
 

interface/src/app/main/EntityMaskToggle.tsx

@@ -1,5 +1,3 @@
-import { useCallback, useMemo } from 'react';
-
 import { ToggleButton, ToggleButtonGroup } from '@mui/material';
 
 import OptionIcon from './OptionIcon';
@@ -11,7 +9,6 @@ interface EntityMaskToggleProps {
   de: DeviceEntity;
 }
 
-// Available mask values
 const MASK_VALUES = [
   DeviceEntityMask.DV_WEB_EXCLUDE, // 1
   DeviceEntityMask.DV_API_MQTT_EXCLUDE, // 2
@@ -20,123 +17,95 @@ const MASK_VALUES = [
   DeviceEntityMask.DV_DELETED // 128
 ];
 
-/**
+const getMaskNumber = (newMask: string[]): number =>
- * Converts an array of mask strings to a bitmask number
+  newMask.reduce((mask, entry) => mask | Number(entry), 0);
- */
-const getMaskNumber = (newMask: string[]): number => {
-  return newMask.reduce((mask, entry) => mask | Number(entry), 0);
-};
 
-/**
+const getMaskString = (mask: number): string[] =>
- * Converts a bitmask number to an array of mask strings
+  MASK_VALUES.filter((value) => (mask & value) === value).map((value) =>
- */
-const getMaskString = (mask: number): string[] => {
-  return MASK_VALUES.filter((value) => (mask & value) === value).map((value) =>
     String(value)
   );
-};
 
-/**
- * Checks if a specific mask bit is set
- */
 const hasMask = (mask: number, flag: number): boolean => (mask & flag) === flag;
 
 const EntityMaskToggle = ({ onUpdate, de }: EntityMaskToggleProps) => {
-  const handleChange = useCallback(
+  const handleChange = (_event: unknown, mask: string[]) => {
-    (_event: unknown, mask: string[]) => {
+    const newMask = getMaskNumber(mask);
-      // Convert selected masks to a number
+    const updatedDe = { ...de };
-      const newMask = getMaskNumber(mask);
-      const updatedDe = { ...de };
 
-      // Apply business logic for mask interactions
+    // If entity has no name and is set to readonly, also exclude from web
-      // If entity has no name and is set to readonly, also exclude from web
+    if (updatedDe.n === '' && hasMask(newMask, DeviceEntityMask.DV_READONLY)) {
-      if (updatedDe.n === '' && hasMask(newMask, DeviceEntityMask.DV_READONLY)) {
+      updatedDe.m = newMask | DeviceEntityMask.DV_WEB_EXCLUDE;
-        updatedDe.m = newMask | DeviceEntityMask.DV_WEB_EXCLUDE;
+    } else {
-      } else {
+      updatedDe.m = newMask;
-        updatedDe.m = newMask;
+    }
-      }
 
-      // If excluded from web, cannot be favorite
+    // If excluded from web, cannot be favorite
-      if (hasMask(updatedDe.m, DeviceEntityMask.DV_WEB_EXCLUDE)) {
+    if (hasMask(updatedDe.m, DeviceEntityMask.DV_WEB_EXCLUDE)) {
-        updatedDe.m = updatedDe.m & ~DeviceEntityMask.DV_FAVORITE;
+      updatedDe.m = updatedDe.m & ~DeviceEntityMask.DV_FAVORITE;
-      }
+    }
 
-      onUpdate(updatedDe);
+    onUpdate(updatedDe);
-    },
+  };
-    [de, onUpdate]
-  );
-
-  // Memoize mask string value
-  const maskStringValue = useMemo(() => getMaskString(de.m), [de.m]);
-
-  // Memoize disabled states
-  const isFavoriteDisabled = useMemo(
-    () =>
-      hasMask(de.m, DeviceEntityMask.DV_WEB_EXCLUDE | DeviceEntityMask.DV_DELETED) ||
-      de.n === undefined,
-    [de.m, de.n]
-  );
-
-  const isReadonlyDisabled = useMemo(
-    () =>
-      !de.w ||
-      hasMask(de.m, DeviceEntityMask.DV_WEB_EXCLUDE | DeviceEntityMask.DV_FAVORITE),
-    [de.w, de.m]
-  );
-
-  const isApiMqttExcludeDisabled = useMemo(
-    () => de.n === '' || hasMask(de.m, DeviceEntityMask.DV_DELETED),
-    [de.n, de.m]
-  );
-
-  const isWebExcludeDisabled = useMemo(
-    () => de.n === undefined || hasMask(de.m, DeviceEntityMask.DV_DELETED),
-    [de.n, de.m]
-  );
-
-  // Memoize mask flag checks
-  const isFavoriteSet = useMemo(
-    () => hasMask(de.m, DeviceEntityMask.DV_FAVORITE),
-    [de.m]
-  );
-  const isReadonlySet = useMemo(
-    () => hasMask(de.m, DeviceEntityMask.DV_READONLY),
-    [de.m]
-  );
-  const isApiMqttExcludeSet = useMemo(
-    () => hasMask(de.m, DeviceEntityMask.DV_API_MQTT_EXCLUDE),
-    [de.m]
-  );
-  const isWebExcludeSet = useMemo(
-    () => hasMask(de.m, DeviceEntityMask.DV_WEB_EXCLUDE),
-    [de.m]
-  );
-  const isDeletedSet = useMemo(
-    () => hasMask(de.m, DeviceEntityMask.DV_DELETED),
-    [de.m]
-  );
 
   return (
     <ToggleButtonGroup
       size="small"
       color="secondary"
-      value={maskStringValue}
+      value={getMaskString(de.m)}
       onChange={handleChange}
     >
-      <ToggleButton value="8" disabled={isFavoriteDisabled}>
+      <ToggleButton
-        <OptionIcon type="favorite" isSet={isFavoriteSet} />
+        value="8"
+        disabled={
+          hasMask(
+            de.m,
+            DeviceEntityMask.DV_WEB_EXCLUDE | DeviceEntityMask.DV_DELETED
+          ) || de.n === undefined
+        }
+      >
+        <OptionIcon
+          type="favorite"
+          isSet={hasMask(de.m, DeviceEntityMask.DV_FAVORITE)}
+        />
       </ToggleButton>
-      <ToggleButton value="4" disabled={isReadonlyDisabled}>
+      <ToggleButton
-        <OptionIcon type="readonly" isSet={isReadonlySet} />
+        value="4"
+        disabled={
+          !de.w ||
+          hasMask(
+            de.m,
+            DeviceEntityMask.DV_WEB_EXCLUDE | DeviceEntityMask.DV_FAVORITE
+          )
+        }
+      >
+        <OptionIcon
+          type="readonly"
+          isSet={hasMask(de.m, DeviceEntityMask.DV_READONLY)}
+        />
       </ToggleButton>
-      <ToggleButton value="2" disabled={isApiMqttExcludeDisabled}>
+      <ToggleButton
-        <OptionIcon type="api_mqtt_exclude" isSet={isApiMqttExcludeSet} />
+        value="2"
+        disabled={de.n === '' || hasMask(de.m, DeviceEntityMask.DV_DELETED)}
+      >
+        <OptionIcon
+          type="api_mqtt_exclude"
+          isSet={hasMask(de.m, DeviceEntityMask.DV_API_MQTT_EXCLUDE)}
+        />
       </ToggleButton>
-      <ToggleButton value="1" disabled={isWebExcludeDisabled}>
+      <ToggleButton
-        <OptionIcon type="web_exclude" isSet={isWebExcludeSet} />
+        value="1"
+        disabled={de.n === undefined || hasMask(de.m, DeviceEntityMask.DV_DELETED)}
+      >
+        <OptionIcon
+          type="web_exclude"
+          isSet={hasMask(de.m, DeviceEntityMask.DV_WEB_EXCLUDE)}
+        />
       </ToggleButton>
       <ToggleButton value="128">
-        <OptionIcon type="deleted" isSet={isDeletedSet} />
+        <OptionIcon
+          type="deleted"
+          isSet={hasMask(de.m, DeviceEntityMask.DV_DELETED)}
+        />
       </ToggleButton>
     </ToggleButtonGroup>
   );

interface/src/app/main/Help.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useContext, useMemo, useState } from 'react';
+import { memo, useContext, useState } from 'react';
 import type { ReactElement } from 'react';
 import { toast } from 'react-toastify';
 
@@ -60,6 +60,8 @@ const AVATAR_STYLES: SxProps<Theme> = {
   bgcolor: '#72caf9'
 };
 
+const SYSTEM_INFO_API: APIcall = { device: 'system', cmd: 'info', id: 0 };
+
 const HelpComponent = () => {
   const { LL } = useI18nContext();
   useLayoutTitle(LL.HELP());
@@ -72,12 +74,7 @@ const HelpComponent = () => {
   });
   const [imgError, setImgError] = useState<boolean>(false);
 
-  const getCustomSupportMethod = useMemo(
+  useRequest(callAction({ action: 'getCustomSupport' })).onSuccess((event) => {
-    () => callAction({ action: 'getCustomSupport' }),
-    []
-  );
-
-  useRequest(getCustomSupportMethod).onSuccess((event) => {
     if (event?.data && Object.keys(event.data).length !== 0) {
       const { Support } = event.data as {
         Support: { img_url?: string; html?: string[] };
@@ -100,47 +97,26 @@ const HelpComponent = () => {
       toast.error(String(error.error?.message || 'An error occurred'));
     });
 
-  // Optimize API call memoization
+  const helpLinks: HelpLink[] = [
-  const apiCall = useMemo(() => ({ device: 'system', cmd: 'info', id: 0 }), []);
+    {
+      href: 'https://emsesp.org',
+      icon: <MenuBookIcon />,
+      label: () => LL.HELP_INFORMATION_1()
+    },
+    {
+      href: 'https://discord.gg/GP9DPSgeJq',
+      icon: <CommentIcon />,
+      label: () => LL.HELP_INFORMATION_2()
+    },
+    {
+      href: 'https://github.com/emsesp/EMS-ESP32/issues/new/choose',
+      icon: <GitHubIcon />,
+      label: () => LL.HELP_INFORMATION_3()
+    }
+  ];
 
-  const handleDownloadSystemInfo = useCallback(() => {
+  const imageSrc =
-    void sendAPI(apiCall);
+    imgError || !customSupport.img_url ? DEFAULT_IMAGE_URL : customSupport.img_url;
-  }, [sendAPI, apiCall]);
-
-  const handleImageError = useCallback(() => {
-    setImgError(true);
-  }, []);
-
-  // Memoize help links to prevent recreation on every render
-  const helpLinks: HelpLink[] = useMemo(
-    () => [
-      {
-        href: 'https://emsesp.org',
-        icon: <MenuBookIcon />,
-        label: () => LL.HELP_INFORMATION_1()
-      },
-      {
-        href: 'https://discord.gg/GP9DPSgeJq',
-        icon: <CommentIcon />,
-        label: () => LL.HELP_INFORMATION_2()
-      },
-      {
-        href: 'https://github.com/emsesp/EMS-ESP32/issues/new/choose',
-        icon: <GitHubIcon />,
-        label: () => LL.HELP_INFORMATION_3()
-      }
-    ],
-    [LL]
-  );
-
-  const isAdmin = useMemo(() => me?.admin ?? false, [me?.admin]);
-
-  // Memoize image source computation
-  const imageSrc = useMemo(
-    () =>
-      imgError || !customSupport.img_url ? DEFAULT_IMAGE_URL : customSupport.img_url,
-    [imgError, customSupport.img_url]
-  );
 
   return (
     <SectionContent>
@@ -157,13 +133,13 @@ const HelpComponent = () => {
             component="img"
             referrerPolicy="no-referrer"
             sx={IMAGE_STYLES}
-            onError={handleImageError}
+            onError={() => setImgError(true)}
             src={imageSrc}
           />
         </Stack>
       )}
 
-      {isAdmin && (
+      {me?.admin && (
         <List>
           {helpLinks.map(({ href, icon, label }) => (
             <ListItem key={href}>
@@ -191,7 +167,7 @@ const HelpComponent = () => {
           startIcon={<DownloadIcon />}
           variant="outlined"
           color="primary"
-          onClick={handleDownloadSystemInfo}
+          onClick={() => void sendAPI(SYSTEM_INFO_API)}
         >
           {LL.SUPPORT_INFORMATION(0)}
         </Button>
@@ -214,7 +190,6 @@ const HelpComponent = () => {
   );
 };
 
-// Memoize the component to prevent unnecessary re-renders
 const Help = memo(HelpComponent);
 
 export default Help;

interface/src/app/main/Modules.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useState } from 'react';
 import { useBlocker } from 'react-router';
 import { toast } from 'react-toastify';
 
@@ -69,58 +69,53 @@ const Modules = () => {
     }
   );
 
-  const modules_theme = useTheme(
+  const modules_theme = useTheme({
-    useMemo(
+    Table: `
-      () => ({
+      --data-table-library_grid-template-columns: 48px 180px 120px 100px repeat(1, minmax(160px, 1fr)) 180px;
-        Table: `
+    `,
-          --data-table-library_grid-template-columns: 48px 180px 120px 100px repeat(1, minmax(160px, 1fr)) 180px;
+    BaseRow: `
-        `,
+      font-size: 14px;
-        BaseRow: `
+      .td {
-          font-size: 14px;
+        height: 32px;
-          .td {
+      }
-            height: 32px;
+    `,
-          }
+    BaseCell: `
-        `,
+      &:nth-of-type(1) {
-        BaseCell: `
+        text-align: center;
-          &:nth-of-type(1) {
+      }
-            text-align: center;
+    `,
-          }
+    HeaderRow: `
-        `,
+      text-transform: uppercase;
-        HeaderRow: `
+      background-color: black;
-          text-transform: uppercase;
+      color: #90CAF9;
-          background-color: black;
+      .th {
-          color: #90CAF9;
+        border-bottom: 1px solid #565656;
-          .th {
+        height: 36px;
-            border-bottom: 1px solid #565656;
+      }
-            height: 36px;
+    `,
-          }
+    Row: `
-        `,
+      background-color: #1e1e1e;
-        Row: `
+      position: relative;
-          background-color: #1e1e1e;
+      cursor: pointer;
-          position: relative;
+      .td {
-          cursor: pointer;
+        border-top: 1px solid #565656;
-          .td {
+        border-bottom: 1px solid #565656;
-            border-top: 1px solid #565656;
+      }
-            border-bottom: 1px solid #565656;
+      &:hover .td {
-          }
+        border-top: 1px solid #177ac9;
-          &:hover .td {
+        border-bottom: 1px solid #177ac9;
-            border-top: 1px solid #177ac9;
+      }
-            border-bottom: 1px solid #177ac9;
+      &:nth-of-type(odd) .td {
-          }
+        background-color: #303030;
-          &:nth-of-type(odd) .td {
+      }
-            background-color: #303030;
+    `
-          }
+  });
-        `
-      }),
-      []
-    )
-  );
 
-  const onDialogClose = useCallback(() => {
+  const onDialogClose = () => {
     setDialogOpen(false);
-  }, []);
+  };
 
-  const updateModuleItem = useCallback((updatedItem: ModuleItem) => {
+  const updateModuleItem = (updatedItem: ModuleItem) => {
     void updateState(readModules(), (data: ModuleItem[]) => {
       const new_data = data.map((mi) =>
         mi.id === updatedItem.id ? { ...mi, ...updatedItem } : mi
@@ -128,28 +123,25 @@ const Modules = () => {
       setNumChanges(new_data.filter(hasModulesChanged).length);
       return new_data;
     });
-  }, []);
+  };
 
-  const onDialogSave = useCallback(
+  const onDialogSave = (updatedItem: ModuleItem) => {
-    (updatedItem: ModuleItem) => {
+    setDialogOpen(false);
-      setDialogOpen(false);
+    updateModuleItem(updatedItem);
-      updateModuleItem(updatedItem);
+  };
-    },
-    [updateModuleItem]
-  );
 
-  const editModuleItem = useCallback((mi: ModuleItem) => {
+  const editModuleItem = (mi: ModuleItem) => {
     setSelectedModuleItem(mi);
     setDialogOpen(true);
-  }, []);
+  };
 
-  const onCancel = useCallback(async () => {
+  const onCancel = async () => {
     await fetchModules().then(() => {
       setNumChanges(0);
     });
-  }, [fetchModules]);
+  };
 
-  const saveModules = useCallback(async () => {
+  const saveModules = async () => {
     try {
       await Promise.all(
         modules.map((condensed_mi: ModuleItem) =>
@@ -167,9 +159,9 @@ const Modules = () => {
       await fetchModules();
       setNumChanges(0);
     }
-  }, [modules, updateModules, LL, fetchModules]);
+  };
 
-  const content = useMemo(() => {
+  const renderContent = () => {
     if (!modules) {
       return (
         <FormLoader onRetry={fetchModules} errorMessage={error?.message || ''} />
@@ -262,22 +254,12 @@ const Modules = () => {
         </Box>
       </>
     );
-  }, [
+  };
-    modules,
-    fetchModules,
-    error,
-    modules_theme,
-    editModuleItem,
-    LL,
-    numChanges,
-    onCancel,
-    saveModules
-  ]);
 
   return (
     <SectionContent>
       {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {content}
+      {renderContent()}
       {selectedModuleItem && (
         <ModulesDialog
           open={dialogOpen}

interface/src/app/main/ModulesDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import DoneIcon from '@mui/icons-material/Done';
@@ -37,14 +37,10 @@ const ModulesDialog = ({
   const { LL } = useI18nContext();
   const [editItem, setEditItem] = useState<ModuleItem>(selectedItem);
 
-  const updateFormValue = useMemo(
+  const updateFormValue = updateValue(
-    () =>
+    setEditItem as unknown as React.Dispatch<
-      updateValue(
+      React.SetStateAction<Record<string, unknown>>
-        setEditItem as unknown as React.Dispatch<
+    >
-          React.SetStateAction<Record<string, unknown>>
-        >
-      ),
-    []
   );
 
   // Sync form state when dialog opens or selected item changes
@@ -54,18 +50,13 @@ const ModulesDialog = ({
     }
   }, [open, selectedItem]);
 
-  const handleSave = useCallback(() => {
+  const handleSave = () => {
     onSave(editItem);
-  }, [editItem, onSave]);
+  };
-
-  const dialogTitle = useMemo(
-    () => `${LL.EDIT()} ${editItem.key}`,
-    [LL, editItem.key]
-  );
 
   return (
     <Dialog sx={dialogStyle} fullWidth maxWidth="xs" open={open} onClose={onClose}>
-      <DialogTitle>{dialogTitle}</DialogTitle>
+      <DialogTitle>{`${LL.EDIT()} ${editItem.key}`}</DialogTitle>
       <DialogContent dividers>
         <Grid container>
           <BlockFormControlLabel

interface/src/app/main/Scheduler.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useBlocker } from 'react-router';
 import { toast } from 'react-toastify';
 
@@ -132,7 +132,7 @@ const Scheduler = () => {
     }
   );
 
-  const hasScheduleChanged = useCallback((si: ScheduleItem) => {
+  const hasScheduleChanged = (si: ScheduleItem) => {
     return (
       si.id !== si.o_id ||
       (si.name || '') !== (si.o_name || '') ||
@@ -143,15 +143,13 @@ const Scheduler = () => {
       si.cmd !== si.o_cmd ||
       si.value !== si.o_value
     );
-  }, []);
+  };
 
-  const intervalCallback = useCallback(() => {
+  useInterval(() => {
     if (numChanges === 0) {
       void fetchSchedule();
     }
-  }, [numChanges, fetchSchedule]);
+  }, INTERVAL_DELAY);
-
-  useInterval(intervalCallback, INTERVAL_DELAY);
 
   useEffect(() => {
     const formatter = new Intl.DateTimeFormat(locale, {
@@ -169,7 +167,7 @@ const Scheduler = () => {
 
   const schedule_theme = useTheme(scheduleTheme);
 
-  const saveSchedule = useCallback(async () => {
+  const saveSchedule = async () => {
     try {
       await updateSchedule({
         schedule: schedule
@@ -192,46 +190,43 @@ const Scheduler = () => {
       await fetchSchedule();
       setNumChanges(0);
     }
-  }, [LL, schedule, updateSchedule, fetchSchedule]);
+  };
 
-  const editScheduleItem = useCallback((si: ScheduleItem) => {
+  const editScheduleItem = (si: ScheduleItem) => {
     setCreating(false);
     setSelectedScheduleItem(si);
     setDialogOpen(true);
     if (si.o_name === undefined) {
       si.o_name = si.name;
     }
-  }, []);
+  };
 
-  const onDialogClose = useCallback(() => {
+  const onDialogClose = () => {
     setDialogOpen(false);
-  }, []);
+  };
 
-  const onDialogCancel = useCallback(async () => {
+  const onDialogCancel = async () => {
     await fetchSchedule().then(() => {
       setNumChanges(0);
     });
-  }, [fetchSchedule]);
+  };
 
-  const onDialogSave = useCallback(
+  const onDialogSave = (updatedItem: ScheduleItem) => {
-    (updatedItem: ScheduleItem) => {
+    setDialogOpen(false);
-      setDialogOpen(false);
+    void updateState(readSchedule(), (data: ScheduleItem[]) => {
-      void updateState(readSchedule(), (data: ScheduleItem[]) => {
+      const new_data = creating
-        const new_data = creating
+        ? [...data, updatedItem]
-          ? [...data, updatedItem]
+        : data.map((si) =>
-          : data.map((si) =>
+            si.id === updatedItem.id ? { ...si, ...updatedItem } : si
-              si.id === updatedItem.id ? { ...si, ...updatedItem } : si
+          );
-            );
 
-        setNumChanges(new_data.filter((si) => hasScheduleChanged(si)).length);
+      setNumChanges(new_data.filter((si) => hasScheduleChanged(si)).length);
 
-        return new_data;
+      return new_data;
-      });
+    });
-    },
+  };
-    [creating, hasScheduleChanged]
-  );
 
-  const addScheduleItem = useCallback(() => {
+  const addScheduleItem = () => {
     setCreating(true);
     const newItem: ScheduleItem = {
       id: Math.floor(Math.random() * (MAX_ID - MIN_ID) + MIN_ID),
@@ -239,36 +234,29 @@ const Scheduler = () => {
     };
     setSelectedScheduleItem(newItem);
     setDialogOpen(true);
-  }, []);
+  };
 
-  const filteredAndSortedSchedule = useMemo(
+  const filteredAndSortedSchedule = schedule
-    () =>
+    .filter((si: ScheduleItem) => !si.deleted)
-      schedule
+    .sort((a: ScheduleItem, b: ScheduleItem) => a.flags - b.flags);
-        .filter((si: ScheduleItem) => !si.deleted)
-        .sort((a: ScheduleItem, b: ScheduleItem) => a.flags - b.flags),
-    [schedule]
-  );
 
-  const dayBox = useCallback(
+  const dayBox = (si: ScheduleItem, flag: number) => {
-    (si: ScheduleItem, flag: number) => {
+    const dayIndex = Math.log(flag) / LOG_2;
-      const dayIndex = Math.log(flag) / LOG_2;
+    const isActive = (si.flags & flag) === flag;
-      const isActive = (si.flags & flag) === flag;
 
-      return (
+    return (
-        <>
+      <>
-          <Box>
+        <Box>
-            <Typography sx={{ fontSize: 11 }} color={isActive ? 'primary' : 'grey'}>
+          <Typography sx={{ fontSize: 11 }} color={isActive ? 'primary' : 'grey'}>
-              {dow[dayIndex]}
+            {dow[dayIndex]}
-            </Typography>
+          </Typography>
-          </Box>
+        </Box>
-          <Divider orientation="vertical" flexItem />
+        <Divider orientation="vertical" flexItem />
-        </>
+      </>
-      );
+    );
-    },
+  };
-    [dow]
-  );
 
-  const scheduleType = useCallback((si: ScheduleItem) => {
+  const scheduleType = (si: ScheduleItem) => {
     const label = scheduleTypeLabels[si.flags];
 
     return (
@@ -278,9 +266,9 @@ const Scheduler = () => {
         </Typography>
       </Box>
     );
-  }, []);
+  };
 
-  const renderSchedule = useCallback(() => {
+  const renderSchedule = () => {
     if (!schedule) {
       return (
         <FormLoader onRetry={fetchSchedule} errorMessage={error?.message || ''} />
@@ -343,17 +331,7 @@ const Scheduler = () => {
         )}
       </Table>
     );
-  }, [
+  };
-    schedule,
-    error,
-    fetchSchedule,
-    filteredAndSortedSchedule,
-    schedule_theme,
-    editScheduleItem,
-    LL,
-    dayBox,
-    scheduleType
-  ]);
 
   return (
     <SectionContent>

interface/src/app/main/SchedulerDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import AddIcon from '@mui/icons-material/Add';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -60,6 +60,12 @@ const FLAG_VALUES = [
   ScheduleFlag.SCHEDULE_SAT
 ] as const;
 
+const getFlagDOWnumber = (flags: string[]) =>
+  flags.reduce((acc, flag) => acc | Number(flag), 0) & FLAG_MASK_127;
+
+const getFlagDOWstring = (f: number) =>
+  FLAG_VALUES.filter((flag) => (f & flag) === flag).map((flag) => String(flag));
+
 interface SchedulerDialogProps {
   open: boolean;
   creating: boolean;
@@ -84,6 +90,7 @@ const SchedulerDialog = ({
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
   const [scheduleType, setScheduleType] = useState<ScheduleFlag>();
 
+  // Stable handler reference so the memoized ValidatedTextField can skip re-renders
   const updateFormValue = useMemo(
     () =>
       updateValue(
@@ -112,129 +119,95 @@ const SchedulerDialog = ({
     }
   }, [open, selectedItem]);
 
-  // Helper function to handle save operations
+  const handleSave = async (itemToSave: ScheduleItem) => {
-  const handleSave = useCallback(
+    try {
-    async (itemToSave: ScheduleItem) => {
+      setFieldErrors(undefined);
-      try {
+      await validate(validator, itemToSave);
-        setFieldErrors(undefined);
+      onSave(itemToSave);
-        await validate(validator, itemToSave);
+    } catch (error) {
-        onSave(itemToSave);
+      setFieldErrors((error as ValidationError).fieldErrors);
-      } catch (error) {
-        setFieldErrors((error as ValidationError).fieldErrors);
-      }
-    },
-    [validator, onSave]
-  );
-
-  const save = useCallback(async () => {
-    await handleSave(editItem);
-  }, [editItem, handleSave]);
-
-  const saveandactivate = useCallback(async () => {
-    await handleSave({ ...editItem, active: true });
-  }, [editItem, handleSave]);
-
-  const remove = useCallback(() => {
-    onSave({ ...editItem, deleted: true });
-  }, [editItem, onSave]);
-
-  // Optimize DOW flag conversion
-  const getFlagDOWnumber = useCallback((flags: string[]) => {
-    return flags.reduce((acc, flag) => acc | Number(flag), 0) & FLAG_MASK_127;
-  }, []);
-
-  const getFlagDOWstring = useCallback((f: number) => {
-    return FLAG_VALUES.filter((flag) => (f & flag) === flag).map((flag) =>
-      String(flag)
-    );
-  }, []);
-
-  // Day of week display component
-  const DayOfWeekButton = useCallback(
-    (flag: number) => {
-      const dayIndex = Math.log2(flag);
-      const isSelected = (editItem.flags & flag) === flag;
-      return (
-        <Typography
-          sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
-          color={isSelected ? 'primary' : 'grey'}
-        >
-          {dow[dayIndex]}
-        </Typography>
-      );
-    },
-    [editItem.flags, dow]
-  );
-
-  const handleClose = useCallback(
-    (_event: React.SyntheticEvent, reason: 'backdropClick' | 'escapeKeyDown') => {
-      if (reason !== 'backdropClick') {
-        onClose();
-      }
-    },
-    [onClose]
-  );
-
-  const handleScheduleTypeChange = useCallback(
-    (_event: React.SyntheticEvent<HTMLElement>, flag: ScheduleFlag | null) => {
-      if (flag !== null) {
-        setFieldErrors(undefined); // clear any validation errors
-        setScheduleType(flag);
-        // wipe the time field when changing the schedule type
-        // set the flags based on type
-        const newFlags = flag === ScheduleFlag.SCHEDULE_DAY ? FLAG_ALL_DAYS : flag;
-        setEditItem((prev) => ({ ...prev, time: '', flags: newFlags }));
-      }
-    },
-    []
-  );
-
-  const handleDOWChange = useCallback(
-    (_event: React.SyntheticEvent<HTMLElement>, flags: string[]) => {
-      const newFlags =
-        getFlagDOWnumber(flags) === 0 ? FLAG_ALL_DAYS : getFlagDOWnumber(flags);
-      setEditItem((prev) => ({ ...prev, flags: newFlags }));
-    },
-    [getFlagDOWnumber]
-  );
-
-  // Memoize derived values
-  const isDaySchedule = useMemo(
-    () => scheduleType === ScheduleFlag.SCHEDULE_DAY,
-    [scheduleType]
-  );
-  const isTimerSchedule = useMemo(
-    () => scheduleType === ScheduleFlag.SCHEDULE_TIMER,
-    [scheduleType]
-  );
-  const isImmediateSchedule = useMemo(
-    () => scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE,
-    [scheduleType]
-  );
-  const needsTimeField = useMemo(
-    () => isDaySchedule || isTimerSchedule,
-    [isDaySchedule, isTimerSchedule]
-  );
-
-  const dowFlags = useMemo(
-    () => getFlagDOWstring(editItem.flags),
-    [editItem.flags, getFlagDOWstring]
-  );
-
-  const timeFieldValue = useMemo(() => {
-    if (needsTimeField) {
-      return editItem.time === '' ? DEFAULT_TIME : editItem.time;
     }
-    return editItem.time === DEFAULT_TIME ? '' : editItem.time;
+  };
-  }, [editItem.time, needsTimeField]);
 
-  const timeFieldLabel = useMemo(() => {
+  const save = async () => {
+    await handleSave(editItem);
+  };
+
+  const saveandactivate = async () => {
+    await handleSave({ ...editItem, active: true });
+  };
+
+  const remove = () => {
+    onSave({ ...editItem, deleted: true });
+  };
+
+  const DayOfWeekButton = (flag: number) => {
+    const dayIndex = Math.log2(flag);
+    const isSelected = (editItem.flags & flag) === flag;
+    return (
+      <Typography
+        sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
+        color={isSelected ? 'primary' : 'grey'}
+      >
+        {dow[dayIndex]}
+      </Typography>
+    );
+  };
+
+  const handleClose = (
+    _event: React.SyntheticEvent,
+    reason: 'backdropClick' | 'escapeKeyDown'
+  ) => {
+    if (reason !== 'backdropClick') {
+      onClose();
+    }
+  };
+
+  const handleScheduleTypeChange = (
+    _event: React.SyntheticEvent<HTMLElement>,
+    flag: ScheduleFlag | null
+  ) => {
+    if (flag !== null) {
+      setFieldErrors(undefined); // clear any validation errors
+      setScheduleType(flag);
+      // wipe the time field when changing the schedule type
+      // set the flags based on type
+      const newFlags = flag === ScheduleFlag.SCHEDULE_DAY ? FLAG_ALL_DAYS : flag;
+      setEditItem((prev) => ({ ...prev, time: '', flags: newFlags }));
+    }
+  };
+
+  const handleDOWChange = (
+    _event: React.SyntheticEvent<HTMLElement>,
+    flags: string[]
+  ) => {
+    const newFlags =
+      getFlagDOWnumber(flags) === 0 ? FLAG_ALL_DAYS : getFlagDOWnumber(flags);
+    setEditItem((prev) => ({ ...prev, flags: newFlags }));
+  };
+
+  const isDaySchedule = scheduleType === ScheduleFlag.SCHEDULE_DAY;
+  const isTimerSchedule = scheduleType === ScheduleFlag.SCHEDULE_TIMER;
+  const isImmediateSchedule = scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE;
+  const needsTimeField = isDaySchedule || isTimerSchedule;
+
+  const dowFlags = getFlagDOWstring(editItem.flags);
+
+  const timeFieldValue = needsTimeField
+    ? editItem.time === ''
+      ? DEFAULT_TIME
+      : editItem.time
+    : editItem.time === DEFAULT_TIME
+      ? ''
+      : editItem.time;
+
+  const timeFieldLabel = (() => {
     if (scheduleType === ScheduleFlag.SCHEDULE_TIMER) return LL.TIMER(1);
     if (scheduleType === ScheduleFlag.SCHEDULE_CONDITION) return LL.CONDITION();
     if (scheduleType === ScheduleFlag.SCHEDULE_ONCHANGE) return LL.ONCHANGE();
     if (scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE) return LL.IMMEDIATE();
     return LL.TIME(1);
-  }, [scheduleType, LL]);
+  })();
 
   return (
     <Dialog sx={dialogStyle} open={open} onClose={handleClose}>

interface/src/app/main/Sensors.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { useContext, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
@@ -158,18 +158,16 @@ const Sensors = () => {
     }
   );
 
-  const intervalCallback = useCallback(() => {
+  useInterval(() => {
     if (!temperatureDialogOpen && !analogDialogOpen) {
       void fetchSensorData();
     }
-  }, [temperatureDialogOpen, analogDialogOpen, fetchSensorData]);
+  });
-
-  useInterval(intervalCallback);
 
   const temperature_theme = useTheme([common_theme, temperature_theme_config]);
   const analog_theme = useTheme([common_theme, analog_theme_config]);
 
-  const getSortIcon = useCallback((state: State, sortKey: unknown) => {
+  const getSortIcon = (state: State, sortKey: unknown) => {
     if (state.sortKey === sortKey && state.reverse) {
       return <KeyboardArrowDownOutlinedIcon />;
     }
@@ -177,7 +175,7 @@ const Sensors = () => {
       return <KeyboardArrowUpOutlinedIcon />;
     }
     return <UnfoldMoreOutlinedIcon />;
-  }, []);
+  };
 
   const analog_sort = useSort(
     { nodes: sensorData.as },
@@ -234,119 +232,104 @@ const Sensors = () => {
 
   useLayoutTitle(LL.SENSORS());
 
-  const formatDurationMin = useCallback(
+  const formatDurationMin = (duration_min: number) => {
-    (duration_min: number) => {
+    const totalMs = duration_min * MS_PER_MINUTE;
-      const totalMs = duration_min * MS_PER_MINUTE;
+    const days = Math.trunc(totalMs / MS_PER_DAY);
-      const days = Math.trunc(totalMs / MS_PER_DAY);
+    const hours = Math.trunc(totalMs / MS_PER_HOUR) % 24;
-      const hours = Math.trunc(totalMs / MS_PER_HOUR) % 24;
+    const minutes = Math.trunc(totalMs / MS_PER_MINUTE) % 60;
-      const minutes = Math.trunc(totalMs / MS_PER_MINUTE) % 60;
 
-      const parts: string[] = [];
+    const parts: string[] = [];
-      if (days > 0) {
+    if (days > 0) {
-        parts.push(LL.NUM_DAYS({ num: days }));
+      parts.push(LL.NUM_DAYS({ num: days }));
-      }
+    }
-      if (hours > 0) {
+    if (hours > 0) {
-        parts.push(LL.NUM_HOURS({ num: hours }));
+      parts.push(LL.NUM_HOURS({ num: hours }));
-      }
+    }
-      if (minutes > 0) {
+    if (minutes > 0) {
-        parts.push(LL.NUM_MINUTES({ num: minutes }));
+      parts.push(LL.NUM_MINUTES({ num: minutes }));
-      }
+    }
-      return parts.join(' ');
+    return parts.join(' ');
-    },
+  };
-    [LL]
-  );
 
-  const formatValue = useCallback(
+  const formatValue = (value: unknown, uom: DeviceValueUOM) => {
-    (value: unknown, uom: DeviceValueUOM) => {
+    if (value === undefined) {
-      if (value === undefined) {
+      return '';
-        return '';
+    }
-      }
+    if (typeof value !== 'number') {
-      if (typeof value !== 'number') {
+      return value as string;
-        return value as string;
+    }
-      }
+    switch (uom) {
-      switch (uom) {
+      case DeviceValueUOM.HOURS:
-        case DeviceValueUOM.HOURS:
+        return value ? formatDurationMin(value * 60) : LL.NUM_HOURS({ num: 0 });
-          return value ? formatDurationMin(value * 60) : LL.NUM_HOURS({ num: 0 });
+      case DeviceValueUOM.MINUTES:
-        case DeviceValueUOM.MINUTES:
+        return value ? formatDurationMin(value) : LL.NUM_MINUTES({ num: 0 });
-          return value ? formatDurationMin(value) : LL.NUM_MINUTES({ num: 0 });
+      case DeviceValueUOM.SECONDS:
-        case DeviceValueUOM.SECONDS:
+        return LL.NUM_SECONDS({ num: value });
-          return LL.NUM_SECONDS({ num: value });
+      case DeviceValueUOM.NONE:
-        case DeviceValueUOM.NONE:
+        return new Intl.NumberFormat().format(value);
-          return new Intl.NumberFormat().format(value);
+      case DeviceValueUOM.DEGREES:
-        case DeviceValueUOM.DEGREES:
+      case DeviceValueUOM.DEGREES_R:
-        case DeviceValueUOM.DEGREES_R:
+      case DeviceValueUOM.FAHRENHEIT:
-        case DeviceValueUOM.FAHRENHEIT:
+        return (
-          return (
+          new Intl.NumberFormat(undefined, {
-            new Intl.NumberFormat(undefined, {
+            minimumFractionDigits: 1
-              minimumFractionDigits: 1
+          }).format(value) +
-            }).format(value) +
+          ' ' +
-            ' ' +
+          DeviceValueUOM_s[uom]
-            DeviceValueUOM_s[uom]
+        );
-          );
+      default:
-        default:
+        return new Intl.NumberFormat().format(value) + ' ' + DeviceValueUOM_s[uom];
-          return new Intl.NumberFormat().format(value) + ' ' + DeviceValueUOM_s[uom];
+    }
-      }
+  };
-    },
-    [formatDurationMin, LL]
-  );
 
-  const updateTemperatureSensor = useCallback(
+  const updateTemperatureSensor = (ts: TemperatureSensor) => {
-    (ts: TemperatureSensor) => {
+    if (me.admin) {
-      if (me.admin) {
+      ts.o_n = ts.n;
-        ts.o_n = ts.n;
+      setSelectedTemperatureSensor(ts);
-        setSelectedTemperatureSensor(ts);
+      setTemperatureDialogOpen(true);
-        setTemperatureDialogOpen(true);
+    }
-      }
+  };
-    },
-    [me.admin]
-  );
 
-  const onTemperatureDialogClose = useCallback(() => {
+  const onTemperatureDialogClose = () => {
     setTemperatureDialogOpen(false);
     void fetchSensorData();
-  }, [fetchSensorData]);
+  };
 
-  const onTemperatureDialogSave = useCallback(
+  const onTemperatureDialogSave = async (ts: TemperatureSensor) => {
-    async (ts: TemperatureSensor) => {
+    await sendTemperatureSensor({
-      await sendTemperatureSensor({
+      id: ts.id,
-        id: ts.id,
+      name: ts.n,
-        name: ts.n,
+      offset: ts.o,
-        offset: ts.o,
+      is_system: ts.s
-        is_system: ts.s
+    })
+      .then(() => {
+        toast.success(LL.UPDATED_OF(LL.SENSOR(1)));
       })
-        .then(() => {
+      .catch(() => {
-          toast.success(LL.UPDATED_OF(LL.SENSOR(1)));
+        toast.error(LL.UPDATE_OF(LL.SENSOR(2)) + ' ' + LL.FAILED(1));
-        })
+      })
-        .catch(() => {
+      .finally(() => {
-          toast.error(LL.UPDATE_OF(LL.SENSOR(2)) + ' ' + LL.FAILED(1));
+        setTemperatureDialogOpen(false);
-        })
+        setSelectedTemperatureSensor(undefined);
-        .finally(() => {
+        void fetchSensorData();
-          setTemperatureDialogOpen(false);
+      });
-          setSelectedTemperatureSensor(undefined);
+  };
-          void fetchSensorData();
-        });
-    },
-    [sendTemperatureSensor, LL, fetchSensorData]
-  );
 
-  const updateAnalogSensor = useCallback(
+  const updateAnalogSensor = (as: AnalogSensor) => {
-    (as: AnalogSensor) => {
+    if (me.admin) {
-      if (me.admin) {
+      setCreating(false);
-        setCreating(false);
+      as.o_n = as.n;
-        as.o_n = as.n;
+      setSelectedAnalogSensor(as);
-        setSelectedAnalogSensor(as);
+      setAnalogDialogOpen(true);
-        setAnalogDialogOpen(true);
+    }
-      }
+  };
-    },
-    [me.admin]
-  );
 
-  const onAnalogDialogClose = useCallback(() => {
+  const onAnalogDialogClose = () => {
     setAnalogDialogOpen(false);
     void fetchSensorData();
-  }, [fetchSensorData]);
+  };
 
-  const addAnalogSensor = useCallback(() => {
+  const addAnalogSensor = () => {
     if (firstAvailableGPIO.current === undefined) {
       toast.error(LL.NO_GPIO());
       return;
@@ -366,194 +349,167 @@ const Sensors = () => {
       o_n: ''
     });
     setAnalogDialogOpen(true);
-  }, []);
+  };
 
-  const onAnalogDialogSave = useCallback(
+  const onAnalogDialogSave = async (as: AnalogSensor) => {
-    async (as: AnalogSensor) => {
+    await sendAnalogSensor({
-      await sendAnalogSensor({
+      id: as.id,
-        id: as.id,
+      gpio: as.g,
-        gpio: as.g,
+      name: as.n,
-        name: as.n,
+      offset: as.o,
-        offset: as.o,
+      factor: as.f,
-        factor: as.f,
+      uom: as.u,
-        uom: as.u,
+      type: as.t,
-        type: as.t,
+      deleted: as.d,
-        deleted: as.d,
+      is_system: as.s
-        is_system: as.s
+    })
+      .then(() => {
+        toast.success(LL.UPDATED_OF(LL.ANALOG_SENSOR(2)));
       })
-        .then(() => {
+      .catch(() => {
-          toast.success(LL.UPDATED_OF(LL.ANALOG_SENSOR(2)));
+        toast.error(LL.UPDATE_OF(LL.ANALOG_SENSOR(5)) + ' ' + LL.FAILED(1));
-        })
+      })
-        .catch(() => {
+      .finally(() => {
-          toast.error(LL.UPDATE_OF(LL.ANALOG_SENSOR(5)) + ' ' + LL.FAILED(1));
+        setAnalogDialogOpen(false);
-        })
+        setSelectedAnalogSensor(undefined);
-        .finally(() => {
+        void fetchSensorData();
-          setAnalogDialogOpen(false);
+      });
-          setSelectedAnalogSensor(undefined);
+  };
-          void fetchSensorData();
+
-        });
+  const RenderAnalogSensors = (
-    },
+    <Table
-    [sendAnalogSensor, LL, fetchSensorData]
+      data={{ nodes: sensorData.as }}
+      theme={analog_theme}
+      sort={analog_sort}
+      layout={{ custom: true }}
+    >
+      {(tableList: AnalogSensor[]) => (
+        <>
+          <Header>
+            <HeaderRow>
+              <HeaderCell stiff>
+                <Button
+                  fullWidth
+                  style={HEADER_BUTTON_STYLE}
+                  endIcon={getSortIcon(analog_sort.state, 'GPIO')}
+                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'GPIO' })}
+                >
+                  GPIO
+                </Button>
+              </HeaderCell>
+              <HeaderCell resize>
+                <Button
+                  fullWidth
+                  style={HEADER_BUTTON_STYLE}
+                  endIcon={getSortIcon(analog_sort.state, 'NAME')}
+                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'NAME' })}
+                >
+                  {LL.NAME(0)}
+                </Button>
+              </HeaderCell>
+              <HeaderCell stiff>
+                <Button
+                  fullWidth
+                  style={HEADER_BUTTON_STYLE}
+                  endIcon={getSortIcon(analog_sort.state, 'TYPE')}
+                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'TYPE' })}
+                >
+                  {LL.TYPE(0)}
+                </Button>
+              </HeaderCell>
+              <HeaderCell stiff>
+                <Button
+                  fullWidth
+                  style={HEADER_BUTTON_STYLE_END}
+                  endIcon={getSortIcon(analog_sort.state, 'VALUE')}
+                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'VALUE' })}
+                >
+                  {LL.VALUE(0)}
+                </Button>
+              </HeaderCell>
+            </HeaderRow>
+          </Header>
+          <Body>
+            {tableList.map((as: AnalogSensor) => (
+              <Row
+                style={{ color: as.s ? 'grey' : 'inherit' }}
+                key={as.id}
+                item={as}
+                onClick={() => updateAnalogSensor(as)}
+              >
+                <Cell stiff>{as.g}</Cell>
+                <Cell>{as.n}</Cell>
+                <Cell stiff>{AnalogTypeNames[as.t - 1]} </Cell>
+                {(as.t === AnalogType.DIGITAL_OUT &&
+                  as.g !== GPIO_25 &&
+                  as.g !== GPIO_26) ||
+                as.t === AnalogType.DIGITAL_IN ||
+                as.t === AnalogType.PULSE ? (
+                  <Cell stiff>{as.v ? LL.ON() : LL.OFF()}</Cell>
+                ) : (
+                  <Cell stiff>{formatValue(as.v, as.u)}</Cell>
+                )}
+              </Row>
+            ))}
+          </Body>
+        </>
+      )}
+    </Table>
   );
 
-  const RenderAnalogSensors = useMemo(
+  const RenderTemperatureSensors = (
-    () => (
+    <Table
-      <Table
+      data={{ nodes: sensorData.ts }}
-        data={{ nodes: sensorData.as }}
+      theme={temperature_theme}
-        theme={analog_theme}
+      sort={temperature_sort}
-        sort={analog_sort}
+      layout={{ custom: true }}
-        layout={{ custom: true }}
+    >
-      >
+      {(tableList: TemperatureSensor[]) => (
-        {(tableList: AnalogSensor[]) => (
+        <>
-          <>
+          <Header>
-            <Header>
+            <HeaderRow>
-              <HeaderRow>
+              <HeaderCell resize>
-                <HeaderCell stiff>
+                <Button
-                  <Button
+                  fullWidth
-                    fullWidth
+                  style={HEADER_BUTTON_STYLE}
-                    style={HEADER_BUTTON_STYLE}
+                  endIcon={getSortIcon(temperature_sort.state, 'NAME')}
-                    endIcon={getSortIcon(analog_sort.state, 'GPIO')}
+                  onClick={() =>
-                    onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'GPIO' })}
+                    temperature_sort.fns.onToggleSort({ sortKey: 'NAME' })
-                  >
+                  }
-                    GPIO
-                  </Button>
-                </HeaderCell>
-                <HeaderCell resize>
-                  <Button
-                    fullWidth
-                    style={HEADER_BUTTON_STYLE}
-                    endIcon={getSortIcon(analog_sort.state, 'NAME')}
-                    onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'NAME' })}
-                  >
-                    {LL.NAME(0)}
-                  </Button>
-                </HeaderCell>
-                <HeaderCell stiff>
-                  <Button
-                    fullWidth
-                    style={HEADER_BUTTON_STYLE}
-                    endIcon={getSortIcon(analog_sort.state, 'TYPE')}
-                    onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'TYPE' })}
-                  >
-                    {LL.TYPE(0)}
-                  </Button>
-                </HeaderCell>
-                <HeaderCell stiff>
-                  <Button
-                    fullWidth
-                    style={HEADER_BUTTON_STYLE_END}
-                    endIcon={getSortIcon(analog_sort.state, 'VALUE')}
-                    onClick={() =>
-                      analog_sort.fns.onToggleSort({ sortKey: 'VALUE' })
-                    }
-                  >
-                    {LL.VALUE(0)}
-                  </Button>
-                </HeaderCell>
-              </HeaderRow>
-            </Header>
-            <Body>
-              {tableList.map((as: AnalogSensor) => (
-                <Row
-                  style={{ color: as.s ? 'grey' : 'inherit' }}
-                  key={as.id}
-                  item={as}
-                  onClick={() => updateAnalogSensor(as)}
                 >
-                  <Cell stiff>{as.g}</Cell>
+                  {LL.NAME(0)}
-                  <Cell>{as.n}</Cell>
+                </Button>
-                  <Cell stiff>{AnalogTypeNames[as.t - 1]} </Cell>
+              </HeaderCell>
-                  {(as.t === AnalogType.DIGITAL_OUT &&
+              <HeaderCell stiff>
-                    as.g !== GPIO_25 &&
+                <Button
-                    as.g !== GPIO_26) ||
+                  fullWidth
-                  as.t === AnalogType.DIGITAL_IN ||
+                  style={HEADER_BUTTON_STYLE_END}
-                  as.t === AnalogType.PULSE ? (
+                  endIcon={getSortIcon(temperature_sort.state, 'VALUE')}
-                    <Cell stiff>{as.v ? LL.ON() : LL.OFF()}</Cell>
+                  onClick={() =>
-                  ) : (
+                    temperature_sort.fns.onToggleSort({ sortKey: 'VALUE' })
-                    <Cell stiff>{formatValue(as.v, as.u)}</Cell>
+                  }
-                  )}
-                </Row>
-              ))}
-            </Body>
-          </>
-        )}
-      </Table>
-    ),
-    [
-      analog_sort,
-      analog_theme,
-      getSortIcon,
-      sensorData.as,
-      LL,
-      updateAnalogSensor,
-      formatValue
-    ]
-  );
-
-  const RenderTemperatureSensors = useMemo(
-    () => (
-      <Table
-        data={{ nodes: sensorData.ts }}
-        theme={temperature_theme}
-        sort={temperature_sort}
-        layout={{ custom: true }}
-      >
-        {(tableList: TemperatureSensor[]) => (
-          <>
-            <Header>
-              <HeaderRow>
-                <HeaderCell resize>
-                  <Button
-                    fullWidth
-                    style={HEADER_BUTTON_STYLE}
-                    endIcon={getSortIcon(temperature_sort.state, 'NAME')}
-                    onClick={() =>
-                      temperature_sort.fns.onToggleSort({ sortKey: 'NAME' })
-                    }
-                  >
-                    {LL.NAME(0)}
-                  </Button>
-                </HeaderCell>
-                <HeaderCell stiff>
-                  <Button
-                    fullWidth
-                    style={HEADER_BUTTON_STYLE_END}
-                    endIcon={getSortIcon(temperature_sort.state, 'VALUE')}
-                    onClick={() =>
-                      temperature_sort.fns.onToggleSort({ sortKey: 'VALUE' })
-                    }
-                  >
-                    {LL.VALUE(0)}
-                  </Button>
-                </HeaderCell>
-              </HeaderRow>
-            </Header>
-            <Body>
-              {tableList.map((ts: TemperatureSensor) => (
-                <Row
-                  style={{ color: ts.s ? 'grey' : 'inherit' }}
-                  key={ts.id}
-                  item={ts}
-                  onClick={() => updateTemperatureSensor(ts)}
                 >
-                  <Cell>{ts.n}</Cell>
+                  {LL.VALUE(0)}
-                  <Cell>{formatValue(ts.t, ts.u)}</Cell>
+                </Button>
-                </Row>
+              </HeaderCell>
-              ))}
+            </HeaderRow>
-            </Body>
+          </Header>
-          </>
+          <Body>
-        )}
+            {tableList.map((ts: TemperatureSensor) => (
-      </Table>
+              <Row
-    ),
+                style={{ color: ts.s ? 'grey' : 'inherit' }}
-    [
+                key={ts.id}
-      temperature_sort,
+                item={ts}
-      temperature_theme,
+                onClick={() => updateTemperatureSensor(ts)}
-      getSortIcon,
+              >
-      sensorData.ts,
+                <Cell>{ts.n}</Cell>
-      LL,
+                <Cell>{formatValue(ts.t, ts.u)}</Cell>
-      updateTemperatureSensor,
+              </Row>
-      formatValue
+            ))}
-    ]
+          </Body>
+        </>
+      )}
+    </Table>
   );
 
   return (

interface/src/app/main/SensorsAnalogDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import DoneIcon from '@mui/icons-material/Done';
@@ -53,6 +53,7 @@ const SensorsAnalogDialog = ({
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
   const [editItem, setEditItem] = useState<AnalogSensor>(selectedItem);
 
+  // Stable handler reference so the memoized ValidatedTextField can skip re-renders
   const updateFormValue = useMemo(
     () =>
       updateValue((updater) =>
@@ -66,71 +67,45 @@ const SensorsAnalogDialog = ({
     [setEditItem]
   );
 
-  // Memoize helper functions to check sensor type conditions
+  const isCounterOrRate =
-  const isCounterOrRate = useMemo(
+    editItem.t === AnalogType.COUNTER ||
-    () =>
+    editItem.t === AnalogType.RATE ||
-      editItem.t === AnalogType.COUNTER ||
+    (editItem.t >= AnalogType.CNT_0 && editItem.t <= AnalogType.CNT_2);
-      editItem.t === AnalogType.RATE ||
+  const isCounter =
-      (editItem.t >= AnalogType.CNT_0 && editItem.t <= AnalogType.CNT_2),
+    editItem.t === AnalogType.COUNTER ||
-    [editItem.t]
+    (editItem.t >= AnalogType.CNT_0 && editItem.t <= AnalogType.CNT_2);
-  );
+  const isFreqType =
-  const isCounter = useMemo(
+    editItem.t >= AnalogType.FREQ_0 && editItem.t <= AnalogType.FREQ_2;
-    () =>
+  const isPWM =
-      editItem.t === AnalogType.COUNTER ||
+    editItem.t === AnalogType.PWM_0 ||
-      (editItem.t >= AnalogType.CNT_0 && editItem.t <= AnalogType.CNT_2),
+    editItem.t === AnalogType.PWM_1 ||
-    [editItem.t]
+    editItem.t === AnalogType.PWM_2;
-  );
+  const isDACOutGPIO =
-  const isFreqType = useMemo(
+    editItem.t === AnalogType.DIGITAL_OUT &&
-    () => editItem.t >= AnalogType.FREQ_0 && editItem.t <= AnalogType.FREQ_2,
+    (editItem.g === 25 || editItem.g === 26);
-    [editItem.t]
+  const isDigitalOutGPIO =
-  );
+    editItem.t === AnalogType.DIGITAL_OUT && editItem.g !== 25 && editItem.g !== 26;
-  const isPWM = useMemo(
-    () =>
-      editItem.t === AnalogType.PWM_0 ||
-      editItem.t === AnalogType.PWM_1 ||
-      editItem.t === AnalogType.PWM_2,
-    [editItem.t]
-  );
-  const isDACOutGPIO = useMemo(
-    () =>
-      editItem.t === AnalogType.DIGITAL_OUT &&
-      (editItem.g === 25 || editItem.g === 26),
-    [editItem.t, editItem.g]
-  );
-  const isDigitalOutGPIO = useMemo(
-    () =>
-      editItem.t === AnalogType.DIGITAL_OUT &&
-      editItem.g !== 25 &&
-      editItem.g !== 26,
-    [editItem.t, editItem.g]
-  );
 
-  // Memoize menu items to avoid recreation on each render
+  const analogTypeMenuItems = AnalogTypeNames.map((val, i) => ({
-  const analogTypeMenuItems = useMemo(
+    name: val,
-    () =>
+    value: i + 1
-      AnalogTypeNames.map((val, i) => ({ name: val, value: i + 1 }))
+  }))
-        .sort((a, b) => a.name.localeCompare(b.name))
+    .sort((a, b) => a.name.localeCompare(b.name))
-        .map(({ name, value }) => (
+    .map(({ name, value }) => (
-          <MenuItem
+      <MenuItem
-            key={name}
+        key={name}
-            value={value}
+        value={value}
-            disabled={disabledTypeList?.includes(value)}
+        disabled={disabledTypeList?.includes(value)}
-          >
+      >
-            {name}
+        {name}
-          </MenuItem>
+      </MenuItem>
-        )),
+    ));
-    [disabledTypeList]
-  );
 
-  const uomMenuItems = useMemo(
+  const uomMenuItems = DeviceValueUOM_s.map((val, i) => (
-    () =>
+    <MenuItem key={val} value={i}>
-      DeviceValueUOM_s.map((val, i) => (
+      {val}
-        <MenuItem key={val} value={i}>
+    </MenuItem>
-          {val}
+  ));
-        </MenuItem>
-      )),
-    []
-  );
 
   const analogGPIOMenuItems = () =>
     // add selectedItem.g to the list
@@ -157,16 +132,16 @@ const SensorsAnalogDialog = ({
     }
   }, [open, selectedItem]);
 
-  const handleClose = useCallback(
+  const handleClose = (
-    (_event: React.SyntheticEvent, reason: 'backdropClick' | 'escapeKeyDown') => {
+    _event: React.SyntheticEvent,
-      if (reason !== 'backdropClick') {
+    reason: 'backdropClick' | 'escapeKeyDown'
-        onClose();
+  ) => {
-      }
+    if (reason !== 'backdropClick') {
-    },
+      onClose();
-    [onClose]
+    }
-  );
+  };
 
-  const save = useCallback(async () => {
+  const save = async () => {
     try {
       setFieldErrors(undefined);
       await validate(validator, editItem);
@@ -174,17 +149,13 @@ const SensorsAnalogDialog = ({
     } catch (error) {
       setFieldErrors((error as ValidationError).fieldErrors);
     }
-  }, [validator, editItem, onSave]);
+  };
 
-  const remove = useCallback(() => {
+  const remove = () => {
     onSave({ ...editItem, d: true });
-  }, [editItem, onSave]);
+  };
 
-  const dialogTitle = useMemo(
+  const dialogTitle = `${creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()} ${LL.ANALOG_SENSOR(0)}`;
-    () =>
-      `${creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()} ${LL.ANALOG_SENSOR(0)}`,
-    [creating, LL]
-  );
 
   return (
     <Dialog sx={dialogStyle} open={open} onClose={handleClose}>

interface/src/app/main/SensorsTemperatureDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import DoneIcon from '@mui/icons-material/Done';
@@ -50,6 +50,7 @@ const SensorsTemperatureDialog = ({
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
   const [editItem, setEditItem] = useState<TemperatureSensor>(selectedItem);
 
+  // Stable handler reference so the memoized ValidatedTextField can skip re-renders
   const updateFormValue = useMemo(
     () =>
       updateValue(
@@ -69,16 +70,13 @@ const SensorsTemperatureDialog = ({
     }
   }, [open, selectedItem]);
 
-  const handleClose = useCallback(
+  const handleClose = (_event: React.SyntheticEvent, reason?: string) => {
-    (_event: React.SyntheticEvent, reason?: string) => {
+    if (reason !== 'backdropClick') {
-      if (reason !== 'backdropClick') {
+      onClose();
-        onClose();
+    }
-      }
+  };
-    },
-    [onClose]
-  );
 
-  const save = useCallback(async () => {
+  const save = async () => {
     try {
       setFieldErrors(undefined);
       await validate(validator, editItem);
@@ -86,29 +84,11 @@ const SensorsTemperatureDialog = ({
     } catch (error) {
       setFieldErrors((error as ValidationError).fieldErrors);
     }
-  }, [validator, editItem, onSave]);
+  };
-
-  const dialogTitle = useMemo(() => `${LL.EDIT()} ${LL.TEMP_SENSOR()}`, [LL]);
-
-  const offsetValue = useMemo(() => numberValue(editItem.o), [editItem.o]);
-
-  const slotProps = useMemo(
-    () => ({
-      input: {
-        startAdornment: <InputAdornment position="start">{TEMP_UNIT}</InputAdornment>
-      },
-      htmlInput: {
-        min: OFFSET_MIN,
-        max: OFFSET_MAX,
-        step: OFFSET_STEP
-      }
-    }),
-    []
-  );
 
   return (
     <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
-      <DialogTitle>{dialogTitle}</DialogTitle>
+      <DialogTitle>{`${LL.EDIT()} ${LL.TEMP_SENSOR()}`}</DialogTitle>
       <DialogContent dividers>
         <Typography sx={{ mb: 2 }} color="warning" variant="body2">
           {LL.ID_OF(LL.SENSOR(0))}: {editItem.id}
@@ -128,12 +108,23 @@ const SensorsTemperatureDialog = ({
             <TextField
               name="o"
               label={LL.OFFSET()}
-              value={offsetValue}
+              value={numberValue(editItem.o)}
               sx={{ width: '11ch' }}
               type="number"
               variant="outlined"
               onChange={updateFormValue}
-              slotProps={slotProps}
+              slotProps={{
+                input: {
+                  startAdornment: (
+                    <InputAdornment position="start">{TEMP_UNIT}</InputAdornment>
+                  )
+                },
+                htmlInput: {
+                  min: OFFSET_MIN,
+                  max: OFFSET_MAX,
+                  step: OFFSET_STEP
+                }
+              }}
             />
           </Grid>
         </Grid>

interface/src/app/main/UserProfile.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useContext } from 'react';
+import { memo, useContext } from 'react';
 
 import PersonIcon from '@mui/icons-material/Person';
 import {
@@ -23,9 +23,9 @@ const UserProfileComponent = () => {
 
   useLayoutTitle(LL.USER_PROFILE());
 
-  const handleSignOut = useCallback(() => {
+  const handleSignOut = () => {
     signOut(true);
-  }, [signOut]);
+  };
 
   return (
     <SectionContent>

interface/src/app/settings/APSettings.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useState } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -63,22 +63,16 @@ const APSettings = () => {
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
-  const updateFormValue = useMemo(
+  const updateFormValue = updateValueDirty(
-    () =>
+    origData as unknown as Record<string, unknown>,
-      updateValueDirty(
+    dirtyFlags,
-        origData as unknown as Record<string, unknown>,
+    setDirtyFlags,
-        dirtyFlags,
+    updateDataValue as (value: unknown) => void
-        setDirtyFlags,
-        updateDataValue as (value: unknown) => void
-      ),
-    [origData, dirtyFlags, setDirtyFlags, updateDataValue]
   );
 
-  // Memoize AP enabled state
+  const apEnabled = data ? isAPEnabled(data) : false;
-  const apEnabled = useMemo(() => (data ? isAPEnabled(data) : false), [data]);
 
-  // Memoize validation and submit handler
+  const validateAndSubmit = async () => {
-  const validateAndSubmit = useCallback(async () => {
     if (!data) return;
 
     try {
@@ -88,7 +82,7 @@ const APSettings = () => {
     } catch (error) {
       setFieldErrors((error as ValidationError).fieldErrors);
     }
-  }, [data, saveData]);
+  };
 
   const content = () => {
     if (!data) {

interface/src/app/settings/ApplicationSettings.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useState } from 'react';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -106,49 +106,36 @@ const ApplicationSettings = () => {
     });
   });
 
-  // Memoized input props to prevent recreation on every render
+  const SecondsInputProps = {
-  const SecondsInputProps = useMemo(
+    endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-    () => ({
+  };
-      endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-    }),
-    [LL]
-  );
 
-  const MinutesInputProps = useMemo(
+  const MinutesInputProps = {
-    () => ({
+    endAdornment: <InputAdornment position="end">{LL.MINUTES()}</InputAdornment>
-      endAdornment: <InputAdornment position="end">{LL.MINUTES()}</InputAdornment>
+  };
-    }),
-    [LL]
-  );
 
-  const HoursInputProps = useMemo(
+  const HoursInputProps = {
-    () => ({
+    endAdornment: <InputAdornment position="end">{LL.HOURS()}</InputAdornment>
-      endAdornment: <InputAdornment position="end">{LL.HOURS()}</InputAdornment>
+  };
-    }),
-    [LL]
-  );
 
-  const doRestart = useCallback(async () => {
+  const doRestart = async () => {
     setRestarting(true);
     await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
       (error: Error) => {
         toast.error(error.message);
       }
     );
-  }, [sendAPI]);
+  };
 
-  const updateBoardProfile = useCallback(
+  const updateBoardProfile = async (board_profile: string) => {
-    async (board_profile: string) => {
+    await readBoardProfile(board_profile).catch((error: Error) => {
-      await readBoardProfile(board_profile).catch((error: Error) => {
+      toast.error(error.message);
-        toast.error(error.message);
+    });
-      });
+  };
-    },
-    [readBoardProfile]
-  );
 
   useLayoutTitle(LL.APPLICATION());
 
-  const validateAndSubmit = useCallback(async () => {
+  const validateAndSubmit = async () => {
     try {
       setFieldErrors(undefined);
       await validate(createSettingsValidator(data), data);
@@ -157,31 +144,27 @@ const ApplicationSettings = () => {
     } finally {
       await saveData();
     }
-  }, [data, saveData]);
+  };
 
-  const changeBoardProfile = useCallback(
+  const changeBoardProfile = (event: React.ChangeEvent<HTMLInputElement>) => {
-    (event: React.ChangeEvent<HTMLInputElement>) => {
+    const boardProfile = event.target.value;
-      const boardProfile = event.target.value;
+    updateFormValue(event);
-      updateFormValue(event);
+    if (boardProfile === 'CUSTOM') {
-      if (boardProfile === 'CUSTOM') {
+      updateDataValue({
-        updateDataValue({
+        ...data,
-          ...data,
+        board_profile: boardProfile
-          board_profile: boardProfile
+      });
-        });
+    } else {
-      } else {
+      void updateBoardProfile(boardProfile);
-        void updateBoardProfile(boardProfile);
+    }
-      }
+  };
-    },
-    [data, updateBoardProfile, updateFormValue, updateDataValue]
-  );
 
-  const restart = useCallback(async () => {
+  const restart = async () => {
     await validateAndSubmit();
     await doRestart();
-  }, [validateAndSubmit, doRestart]);
+  };
 
-  // Memoize board profile select items to prevent recreation
+  const boardProfileItems = boardProfileSelectItems();
-  const boardProfileItems = useMemo(() => boardProfileSelectItems(), []);
 
   const content = () => {
     if (!data || !hardwareData) {

interface/src/app/settings/DownloadUpload.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useState } from 'react';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -57,7 +57,7 @@ const DownloadUpload = () => {
 
   const { data, send: loadData, error } = useRequest(SystemApi.readSystemStatus);
 
-  const doRestart = useCallback(async () => {
+  const doRestart = async () => {
     setRestarting(true);
     try {
       await sendAPI({ device: 'system', cmd: 'restart', id: 0 });
@@ -65,16 +65,33 @@ const DownloadUpload = () => {
       toast.error((error as Error).message);
       setRestarting(false);
     }
-  }, [sendAPI]);
+  };
 
   useLayoutTitle(LL.DOWNLOAD_UPLOAD());
 
-  const handleCloseBackupDialog = useCallback(() => {
+  const handleCloseBackupDialog = () => {
     setConfirmBackup(false);
-  }, []);
+  };
 
-  const renderBackupDialog = useMemo(
+  const handleDownload = (type: string) => () => {
-    () => (
+    void sendExportData(type);
+    setConfirmBackup(false);
+  };
+
+  if (restarting) {
+    return <SystemMonitor />;
+  }
+
+  if (!data) {
+    return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
+  }
+
+  return (
+    <SectionContent>
       <Dialog
         sx={dialogStyle}
         open={confirmBackup}
@@ -98,40 +115,13 @@ const DownloadUpload = () => {
           <Button
             startIcon={<DownloadIcon />}
             variant="outlined"
-            onClick={() => handleDownload('systembackup')()}
+            onClick={handleDownload('systembackup')}
             color="primary"
           >
             {LL.DOWNLOAD(0)}
           </Button>
         </DialogActions>
       </Dialog>
-    ),
-    [confirmBackup, handleCloseBackupDialog, LL]
-  );
-
-  const handleDownload = useCallback(
-    (type: string) => () => {
-      void sendExportData(type);
-      setConfirmBackup(false);
-    },
-    [sendExportData]
-  );
-
-  if (restarting) {
-    return <SystemMonitor />;
-  }
-
-  if (!data) {
-    return (
-      <SectionContent>
-        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
-      </SectionContent>
-    );
-  }
-
-  return (
-    <SectionContent>
-      {renderBackupDialog}
 
       <Typography sx={{ pb: 2 }} variant="h6" color="primary">
         {LL.DOWNLOAD(0)}

interface/src/app/settings/MqttSettings.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useState } from 'react';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -57,7 +57,7 @@ const MqttSettings = () => {
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
-  const sendResetMQTT = useCallback(() => {
+  const sendResetMQTT = () => {
     void callAction({ action: 'resetMQTT' })
       .then(() => {
         toast.success('MQTT ' + LL.REFRESH() + ' successful');
@@ -65,29 +65,20 @@ const MqttSettings = () => {
       .catch((error) => {
         toast.error(String(error.error?.message || 'An error occurred'));
       });
-  }, []);
+  };
 
-  const updateFormValue = useMemo(
+  const updateFormValue = updateValueDirty(
-    () =>
+    origData as unknown as Record<string, unknown>,
-      updateValueDirty(
+    dirtyFlags,
-        origData as unknown as Record<string, unknown>,
+    setDirtyFlags,
-        dirtyFlags,
+    updateDataValue as (value: unknown) => void
-        setDirtyFlags,
-        updateDataValue as (value: unknown) => void
-      ),
-    [origData, dirtyFlags, setDirtyFlags, updateDataValue]
   );
 
-  const SecondsInputProps = useMemo(
+  const SecondsInputProps = {
-    () => ({
+    endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-      endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+  };
-    }),
-    [LL]
-  );
 
-  const emptyFieldErrors = useMemo(() => ({}), []);
+  const validateAndSubmit = async () => {
-
-  const validateAndSubmit = useCallback(async () => {
     if (!data) return;
     try {
       setFieldErrors(undefined);
@@ -96,25 +87,22 @@ const MqttSettings = () => {
     } catch (error) {
       setFieldErrors((error as ValidationError).fieldErrors);
     }
-  }, [data, saveData]);
+  };
 
-  const publishIntervalFields = useMemo(
+  const publishIntervalFields = [
-    () => [
+    { name: 'publish_time_heartbeat', label: 'Heartbeat', validated: true },
-      { name: 'publish_time_heartbeat', label: 'Heartbeat', validated: true },
+    { name: 'publish_time_boiler', label: LL.MQTT_INT_BOILER(), validated: false },
-      { name: 'publish_time_boiler', label: LL.MQTT_INT_BOILER(), validated: false },
+    {
-      {
+      name: 'publish_time_thermostat',
-        name: 'publish_time_thermostat',
+      label: LL.MQTT_INT_THERMOSTATS(),
-        label: LL.MQTT_INT_THERMOSTATS(),
+      validated: false
-        validated: false
+    },
-      },
+    { name: 'publish_time_solar', label: LL.MQTT_INT_SOLAR(), validated: false },
-      { name: 'publish_time_solar', label: LL.MQTT_INT_SOLAR(), validated: false },
+    { name: 'publish_time_mixer', label: LL.MQTT_INT_MIXER(), validated: false },
-      { name: 'publish_time_mixer', label: LL.MQTT_INT_MIXER(), validated: false },
+    { name: 'publish_time_water', label: LL.MQTT_INT_WATER(), validated: false },
-      { name: 'publish_time_water', label: LL.MQTT_INT_WATER(), validated: false },
+    { name: 'publish_time_sensor', label: LL.SENSORS(), validated: false },
-      { name: 'publish_time_sensor', label: LL.SENSORS(), validated: false },
+    { name: 'publish_time_other', label: LL.DEFAULT(0), validated: false }
-      { name: 'publish_time_other', label: LL.DEFAULT(0), validated: false }
+  ];
-    ],
-    [LL]
-  );
 
   if (!data) {
     return (
@@ -154,7 +142,7 @@ const MqttSettings = () => {
         <Grid container spacing={2} rowSpacing={0}>
           <Grid>
             <ValidatedTextField
-              fieldErrors={fieldErrors ?? emptyFieldErrors}
+              fieldErrors={fieldErrors ?? {}}
               name="host"
               label={LL.ADDRESS_OF(LL.BROKER())}
               multiline
@@ -166,7 +154,7 @@ const MqttSettings = () => {
           </Grid>
           <Grid>
             <ValidatedTextField
-              fieldErrors={fieldErrors ?? emptyFieldErrors}
+              fieldErrors={fieldErrors ?? {}}
               name="port"
               label="Port"
               variant="outlined"
@@ -178,7 +166,7 @@ const MqttSettings = () => {
           </Grid>
           <Grid>
             <ValidatedTextField
-              fieldErrors={fieldErrors ?? emptyFieldErrors}
+              fieldErrors={fieldErrors ?? {}}
               name="base"
               label={LL.BASE_TOPIC()}
               variant="outlined"
@@ -219,7 +207,7 @@ const MqttSettings = () => {
           </Grid>
           <Grid>
             <ValidatedTextField
-              fieldErrors={fieldErrors ?? emptyFieldErrors}
+              fieldErrors={fieldErrors ?? {}}
               name="keep_alive"
               label="Keep Alive"
               slotProps={{
@@ -438,7 +426,7 @@ const MqttSettings = () => {
             <Grid key={field.name}>
               {field.validated ? (
                 <ValidatedTextField
-                  fieldErrors={fieldErrors ?? emptyFieldErrors}
+                  fieldErrors={fieldErrors ?? {}}
                   name={field.name}
                   label={field.label}
                   slotProps={{

interface/src/app/settings/NTPSettings.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useState } from 'react';
 import { toast } from 'react-toastify';
 
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
@@ -61,14 +61,11 @@ const NTPSettings = () => {
   const { LL } = useI18nContext();
   useLayoutTitle('NTP');
 
-  // Memoized timezone select items for better performance
   const timeZoneItems = useTimeZoneSelectItems();
 
-  // Memoized selected timezone value
+  const selectedTzValue = data
-  const selectedTzValue = useMemo(
+    ? selectedTimeZone(data.tz_label, data.tz_format)
-    () => (data ? selectedTimeZone(data.tz_label, data.tz_format) : undefined),
+    : undefined;
-    [data?.tz_label, data?.tz_format]
-  );
 
   const [localTime, setLocalTime] = useState<string>('');
   const [settingTime, setSettingTime] = useState<boolean>(false);
@@ -82,32 +79,22 @@ const NTPSettings = () => {
     }
   );
 
-  // Memoize updateFormValue to prevent recreation on every render
+  const updateFormValue = updateValueDirty(
-  const updateFormValue = useMemo(
+    origData as unknown as Record<string, unknown>,
-    () =>
+    dirtyFlags,
-      updateValueDirty(
+    setDirtyFlags,
-        origData as unknown as Record<string, unknown>,
+    updateDataValue as (value: unknown) => void
-        dirtyFlags,
-        setDirtyFlags,
-        updateDataValue as (value: unknown) => void
-      ),
-    [origData, dirtyFlags, setDirtyFlags, updateDataValue]
   );
 
-  // Memoize updateLocalTime handler
+  const updateLocalTime = (event: React.ChangeEvent<HTMLInputElement>) =>
-  const updateLocalTime = useCallback(
+    setLocalTime(event.target.value);
-    (event: React.ChangeEvent<HTMLInputElement>) => setLocalTime(event.target.value),
-    []
-  );
 
-  // Memoize openSetTime handler
+  const openSetTime = () => {
-  const openSetTime = useCallback(() => {
     setLocalTime(formatLocalDateTime(new Date()));
     setSettingTime(true);
-  }, []);
+  };
 
-  // Memoize configureTime handler
+  const configureTime = async () => {
-  const configureTime = useCallback(async () => {
     setProcessing(true);
 
     try {
@@ -120,13 +107,11 @@ const NTPSettings = () => {
     } finally {
       setProcessing(false);
     }
-  }, [localTime, updateTime, LL, loadData]);
+  };
 
-  // Memoize close dialog handler
+  const handleCloseSetTime = () => setSettingTime(false);
-  const handleCloseSetTime = useCallback(() => setSettingTime(false), []);
 
-  // Memoize validate and submit handler
+  const validateAndSubmit = async () => {
-  const validateAndSubmit = useCallback(async () => {
     if (!data) return;
     try {
       setFieldErrors(undefined);
@@ -135,23 +120,18 @@ const NTPSettings = () => {
     } catch (error) {
       setFieldErrors((error as ValidationError).fieldErrors);
     }
-  }, [data, saveData]);
+  };
 
-  // Memoize timezone change handler
+  const changeTimeZone = (event: React.ChangeEvent<HTMLInputElement>) => {
-  const changeTimeZone = useCallback(
+    void updateState(readNTPSettings(), (settings: NTPSettingsType) => ({
-    (event: React.ChangeEvent<HTMLInputElement>) => {
+      ...settings,
-      void updateState(readNTPSettings(), (settings: NTPSettingsType) => ({
+      tz_label: event.target.value,
-        ...settings,
+      tz_format: TIME_ZONES[event.target.value]
-        tz_label: event.target.value,
+    }));
-        tz_format: TIME_ZONES[event.target.value]
+    updateFormValue(event);
-      }));
+  };
-      updateFormValue(event);
-    },
-    [updateFormValue]
-  );
 
-  // Memoize render content to prevent unnecessary re-renders
+  const renderContent = () => {
-  const renderContent = useMemo(() => {
     if (!data) {
       return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
     }
@@ -236,26 +216,12 @@ const NTPSettings = () => {
         )}
       </>
     );
-  }, [
+  };
-    data,
-    errorMessage,
-    loadData,
-    updateFormValue,
-    fieldErrors,
-    selectedTzValue,
-    changeTimeZone,
-    timeZoneItems,
-    dirtyFlags,
-    openSetTime,
-    saving,
-    validateAndSubmit,
-    LL
-  ]);
 
   return (
     <SectionContent>
       {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {renderContent}
+      {renderContent()}
       <Dialog sx={dialogStyle} open={settingTime} onClose={handleCloseSetTime}>
         <DialogTitle>{LL.SET_TIME(1)}</DialogTitle>
         <DialogContent dividers>

interface/src/app/settings/Settings.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useState } from 'react';
 
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -43,148 +43,141 @@ const Settings = () => {
     immediate: false
   });
 
-  const doFormat = useCallback(async () => {
+  const doFormat = async () => {
     await sendAPI({ device: 'system', cmd: 'format', id: 0 }).then(() => {
       setRestarting(true);
       setConfirmFactoryReset(false);
     });
-  }, [sendAPI]);
+  };
 
-  const handleFactoryResetClose = useCallback(() => {
+  const handleFactoryResetClose = () => {
     setConfirmFactoryReset(false);
-  }, []);
+  };
 
-  const handleFactoryResetClick = useCallback(() => {
+  const handleFactoryResetClick = () => {
     setConfirmFactoryReset(true);
-  }, []);
+  };
 
-  const content = useMemo(() => {
+  if (restarting) {
-    return (
+    return <SystemMonitor />;
-      <>
+  }
-        <List>
-          <ListMenuItem
-            icon={TuneIcon}
-            bgcolor="#134ba2"
-            label={LL.APPLICATION()}
-            text={LL.APPLICATION_SETTINGS_1()}
-            to="application"
-          />
 
-          <ListMenuItem
+  return (
-            icon={SettingsEthernetIcon}
+    <SectionContent>
-            bgcolor="#40828f"
+      <List>
-            label={LL.NETWORK(0)}
+        <ListMenuItem
-            text={LL.CONFIGURE(LL.SETTINGS_OF(LL.NETWORK(1)))}
+          icon={TuneIcon}
-            to="network"
+          bgcolor="#134ba2"
-          />
+          label={LL.APPLICATION()}
+          text={LL.APPLICATION_SETTINGS_1()}
+          to="application"
+        />
 
-          <ListMenuItem
+        <ListMenuItem
-            icon={SettingsInputAntennaIcon}
+          icon={SettingsEthernetIcon}
-            bgcolor="#5f9a5f"
+          bgcolor="#40828f"
-            label={LL.ACCESS_POINT(0)}
+          label={LL.NETWORK(0)}
-            text={LL.CONFIGURE(LL.ACCESS_POINT(1))}
+          text={LL.CONFIGURE(LL.SETTINGS_OF(LL.NETWORK(1)))}
-            to="ap"
+          to="network"
-          />
+        />
 
-          <ListMenuItem
+        <ListMenuItem
-            icon={AccessTimeIcon}
+          icon={SettingsInputAntennaIcon}
-            bgcolor="#c5572c"
+          bgcolor="#5f9a5f"
-            label="NTP"
+          label={LL.ACCESS_POINT(0)}
-            text={LL.CONFIGURE(LL.LOCAL_TIME(1))}
+          text={LL.CONFIGURE(LL.ACCESS_POINT(1))}
-            to="ntp"
+          to="ap"
-          />
+        />
 
-          <ListMenuItem
+        <ListMenuItem
-            icon={DeviceHubIcon}
+          icon={AccessTimeIcon}
-            bgcolor="#68374d"
+          bgcolor="#c5572c"
-            label="MQTT"
+          label="NTP"
-            text={LL.CONFIGURE('MQTT')}
+          text={LL.CONFIGURE(LL.LOCAL_TIME(1))}
-            to="mqtt"
+          to="ntp"
-          />
+        />
 
-          <ListMenuItem
+        <ListMenuItem
-            icon={LockIcon}
+          icon={DeviceHubIcon}
-            label={LL.SECURITY(0)}
+          bgcolor="#68374d"
-            text={LL.SECURITY_1()}
+          label="MQTT"
-            to="security"
+          text={LL.CONFIGURE('MQTT')}
-          />
+          to="mqtt"
+        />
 
-          <ListMenuItem
+        <ListMenuItem
-            icon={ViewModuleIcon}
+          icon={LockIcon}
-            bgcolor="#efc34b"
+          label={LL.SECURITY(0)}
-            label={LL.MODULES()}
+          text={LL.SECURITY_1()}
-            text={LL.MODULES_1()}
+          to="security"
-            to="modules"
+        />
-          />
 
-          <ListMenuItem
+        <ListMenuItem
-            icon={ImportExportIcon}
+          icon={ViewModuleIcon}
-            bgcolor="#5d89f7"
+          bgcolor="#efc34b"
-            label={LL.DOWNLOAD_UPLOAD()}
+          label={LL.MODULES()}
-            text={LL.DOWNLOAD_UPLOAD_1()}
+          text={LL.MODULES_1()}
-            to="downloadUpload"
+          to="modules"
-          />
+        />
-        </List>
 
-        <Dialog
+        <ListMenuItem
-          sx={dialogStyle}
+          icon={ImportExportIcon}
-          open={confirmFactoryReset}
+          bgcolor="#5d89f7"
-          onClose={handleFactoryResetClose}
+          label={LL.DOWNLOAD_UPLOAD()}
-        >
+          text={LL.DOWNLOAD_UPLOAD_1()}
-          <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
+          to="downloadUpload"
-          <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
+        />
-          <DialogActions>
+      </List>
-            <Button
-              startIcon={<CancelIcon />}
-              variant="outlined"
-              onClick={handleFactoryResetClose}
-              color="secondary"
-            >
-              {LL.CANCEL()}
-            </Button>
-            <Button
-              startIcon={<SettingsBackupRestoreIcon />}
-              variant="outlined"
-              onClick={doFormat}
-              color="error"
-            >
-              {LL.FACTORY_RESET()}
-            </Button>
-          </DialogActions>
-        </Dialog>
 
-        <Divider />
+      <Dialog
-
+        sx={dialogStyle}
-        <Box
+        open={confirmFactoryReset}
-          sx={{
+        onClose={handleFactoryResetClose}
-            mt: 2,
+      >
-            display: 'flex',
+        <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
-            justifyContent: 'flex-end',
+        <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
-            flexWrap: 'nowrap',
+        <DialogActions>
-            whiteSpace: 'nowrap'
+          <Button
-          }}
+            startIcon={<CancelIcon />}
-        >
+            variant="outlined"
+            onClick={handleFactoryResetClose}
+            color="secondary"
+          >
+            {LL.CANCEL()}
+          </Button>
           <Button
             startIcon={<SettingsBackupRestoreIcon />}
             variant="outlined"
-            onClick={handleFactoryResetClick}
+            onClick={doFormat}
             color="error"
           >
             {LL.FACTORY_RESET()}
           </Button>
-        </Box>
+        </DialogActions>
-      </>
+      </Dialog>
-    );
-  }, [
-    LL,
-    handleFactoryResetClick,
-    handleFactoryResetClose,
-    doFormat,
-    confirmFactoryReset,
-    restarting
-  ]);
 
-  return restarting ? <SystemMonitor /> : <SectionContent>{content}</SectionContent>;
+      <Divider />
+
+      <Box
+        sx={{
+          mt: 2,
+          display: 'flex',
+          justifyContent: 'flex-end',
+          flexWrap: 'nowrap',
+          whiteSpace: 'nowrap'
+        }}
+      >
+        <Button
+          startIcon={<SettingsBackupRestoreIcon />}
+          variant="outlined"
+          onClick={handleFactoryResetClick}
+          color="error"
+        >
+          {LL.FACTORY_RESET()}
+        </Button>
+      </Box>
+    </SectionContent>
+  );
 };
 
 export default Settings;

interface/src/app/settings/TZ.tsx

@@ -1,5 +1,3 @@
-import { useMemo } from 'react';
-
 import { MenuItem } from '@mui/material';
 
 export const TIME_ZONES: Record<string, string> = {
@@ -472,26 +470,16 @@ export function selectedTimeZone(label: string, format: string) {
   return TIME_ZONES[label] === format ? label : undefined;
 }
 
-// Memoized version for use in components
-export function useTimeZoneSelectItems() {
-  return useMemo(
-    () =>
-      TIME_ZONE_LABELS.map((label) => (
-        <MenuItem key={label} value={label}>
-          {label}
-        </MenuItem>
-      )),
-    []
-  );
-}
-
-// Fallback export for backward compatibility - now memoized
 const precomputedTimeZoneItems = TIME_ZONE_LABELS.map((label) => (
   <MenuItem key={label} value={label}>
     {label}
   </MenuItem>
 ));
 
+export function useTimeZoneSelectItems() {
+  return precomputedTimeZoneItems;
+}
+
 export function timeZoneSelectItems() {
   return precomputedTimeZoneItems;
 }

interface/src/app/settings/network/Network.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useState } from 'react';
 import {
   Navigate,
   Route,
@@ -40,26 +40,20 @@ const Network = () => {
 
   const [selectedNetwork, setSelectedNetwork] = useState<WiFiNetwork>();
 
-  const selectNetwork = useCallback(
+  const selectNetwork = (network: WiFiNetwork) => {
-    (network: WiFiNetwork) => {
+    setSelectedNetwork(network);
-      setSelectedNetwork(network);
+    void navigate('/settings/network/settings');
-      void navigate('/settings/network/settings');
+  };
-    },
-    [navigate]
-  );
 
-  const deselectNetwork = useCallback(() => {
+  const deselectNetwork = () => {
     setSelectedNetwork(undefined);
-  }, []);
+  };
 
-  const contextValue = useMemo(
+  const contextValue = {
-    () => ({
+    ...(selectedNetwork && { selectedNetwork }),
-      ...(selectedNetwork && { selectedNetwork }),
+    selectNetwork,
-      selectNetwork,
+    deselectNetwork
-      deselectNetwork
+  };
-    }),
-    [selectedNetwork, selectNetwork, deselectNetwork]
-  );
 
   return (
     <WiFiConnectionContext.Provider value={contextValue}>

interface/src/app/settings/network/NetworkSettings.tsx

@@ -121,19 +121,19 @@ const NetworkSettings = () => {
     deselectNetwork();
   }, [data, saveData, deselectNetwork]);
 
-  const setCancel = useCallback(async () => {
+  const setCancel = async () => {
     deselectNetwork();
     await loadData();
-  }, [deselectNetwork, loadData]);
+  };
 
-  const doRestart = useCallback(async () => {
+  const doRestart = async () => {
     setRestarting(true);
     await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
       (error: Error) => {
         toast.error(error.message);
       }
     );
-  }, [sendAPI]);
+  };
 
   const content = () => {
     if (!data) {

interface/src/app/settings/network/WiFiNetworkScanner.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useRef, useState } from 'react';
+import { memo, useRef, useState } from 'react';
 
 import PermScanWifiIcon from '@mui/icons-material/PermScanWifi';
 import { Button } from '@mui/material';
@@ -48,12 +48,12 @@ const WiFiNetworkScanner = () => {
     }
   });
 
-  const renderNetworkScanner = useCallback(() => {
+  const renderNetworkScanner = () => {
     if (!networkList) {
       return <FormLoader errorMessage={errorMessage || ''} />;
     }
     return <WiFiNetworkSelector networkList={networkList} />;
-  }, [networkList, errorMessage]);
+  };
 
   return (
     <SectionContent>

interface/src/app/settings/network/WiFiNetworkSelector.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useContext } from 'react';
+import { memo, useContext } from 'react';
 
 import LockIcon from '@mui/icons-material/Lock';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
@@ -63,34 +63,31 @@ const WiFiNetworkSelector = ({ networkList }: { networkList: WiFiNetworkList })
 
   const wifiConnectionContext = useContext(WiFiConnectionContext);
 
-  const renderNetwork = useCallback(
+  const renderNetwork = (network: WiFiNetwork) => (
-    (network: WiFiNetwork) => (
+    <ListItem
-      <ListItem
+      key={network.bssid}
-        key={network.bssid}
+      onClick={() => wifiConnectionContext.selectNetwork(network)}
-        onClick={() => wifiConnectionContext.selectNetwork(network)}
+    >
-      >
+      <ListItemAvatar>
-        <ListItemAvatar>
+        <Avatar>{isNetworkOpen(network) ? <LockOpenIcon /> : <LockIcon />}</Avatar>
-          <Avatar>{isNetworkOpen(network) ? <LockOpenIcon /> : <LockIcon />}</Avatar>
+      </ListItemAvatar>
-        </ListItemAvatar>
+      <ListItemText
-        <ListItemText
+        primary={network.ssid}
-          primary={network.ssid}
+        secondary={
-          secondary={
+          'Security: ' +
-            'Security: ' +
+          networkSecurityMode(network) +
-            networkSecurityMode(network) +
+          ', Ch: ' +
-            ', Ch: ' +
+          network.channel +
-            network.channel +
+          ', bssid: ' +
-            ', bssid: ' +
+          network.bssid
-            network.bssid
+        }
-          }
+      />
-        />
+      <ListItemIcon>
-        <ListItemIcon>
+        <Badge badgeContent={network.rssi + 'dBm'}>
-          <Badge badgeContent={network.rssi + 'dBm'}>
+          <WifiIcon sx={{ color: networkQualityHighlight(network, theme) }} />
-            <WifiIcon sx={{ color: networkQualityHighlight(network, theme) }} />
+        </Badge>
-          </Badge>
+      </ListItemIcon>
-        </ListItemIcon>
+    </ListItem>
-      </ListItem>
-    ),
-    [wifiConnectionContext, theme]
   );
 
   if (networkList.networks.length === 0) {

interface/src/app/settings/security/ManageUsers.tsx

@@ -99,34 +99,28 @@ const ManageUsers = () => {
     []
   );
 
-  const noAdminConfigured = useCallback(
+  const noAdminConfigured = () => !data?.users.find((u) => u.admin);
-    () => !data?.users.find((u) => u.admin),
-    [data]
-  );
 
-  const removeUser = useCallback(
+  const removeUser = (toRemove: UserType) => {
-    (toRemove: UserType) => {
+    if (!data) return;
-      if (!data) return;
+    const users = data.users.filter((u) => u.username !== toRemove.username);
-      const users = data.users.filter((u) => u.username !== toRemove.username);
+    updateDataValue({ ...data, users });
-      updateDataValue({ ...data, users });
+    setChanged(changed + 1);
-      setChanged(changed + 1);
+  };
-    },
-    [data, updateDataValue, changed]
-  );
 
-  const createUser = useCallback(() => {
+  const createUser = () => {
     setCreating(true);
     setUser({
       username: '',
       password: '',
       admin: true
     });
-  }, []);
+  };
 
-  const editUser = useCallback((toEdit: UserType) => {
+  const editUser = (toEdit: UserType) => {
     setCreating(false);
     setUser({ ...toEdit });
-  }, []);
+  };
 
   const cancelEditingUser = useCallback(() => {
     setUser(undefined);
@@ -150,20 +144,20 @@ const ManageUsers = () => {
     setGeneratingToken(undefined);
   }, []);
 
-  const generateTokenForUser = useCallback((username: string) => {
+  const generateTokenForUser = (username: string) => {
     setGeneratingToken(username);
-  }, []);
+  };
 
-  const onSubmit = useCallback(async () => {
+  const onSubmit = async () => {
     await saveData();
     await authenticatedContext.refresh();
     setChanged(0);
-  }, [saveData, authenticatedContext]);
+  };
 
-  const onCancelSubmit = useCallback(async () => {
+  const onCancelSubmit = async () => {
     await loadData();
     setChanged(0);
-  }, [loadData]);
+  };
 
   const content = () => {
     if (!data) {
@@ -177,15 +171,10 @@ const ManageUsers = () => {
       admin: boolean;
     }
 
-    // add id to the type, needed for the table
+    const user_table = data.users.map((u) => ({
-    const user_table = useMemo(
+      ...u,
-      () =>
+      id: u.username
-        data.users.map((u) => ({
+    })) as UserType2[];
-          ...u,
-          id: u.username
-        })) as UserType2[],
-      [data.users]
-    );
 
     return (
       <>

interface/src/app/settings/security/Security.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { Navigate, Route, Routes, matchRoutes, useLocation } from 'react-router';
 
 import { Tab } from '@mui/material';
@@ -15,19 +15,15 @@ const Security = () => {
 
   const location = useLocation();
 
-  const matchedRoutes = useMemo(
+  const matchedRoutes = matchRoutes(
-    () =>
+    [
-      matchRoutes(
+      {
-        [
+        path: '/settings/security/settings',
-          {
+        element: <ManageUsers />
-            path: '/settings/security/settings',
+      },
-            element: <ManageUsers />
+      { path: '/settings/security/users', element: <SecuritySettings /> }
-          },
+    ],
-          { path: '/settings/security/users', element: <SecuritySettings /> }
+    location
-        ],
-        location
-      ),
-    [location]
   );
   const routerTab = matchedRoutes?.[0]?.route.path || false;
 

interface/src/app/settings/security/User.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import type { FC } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -62,7 +62,7 @@ const User: FC<UserFormProps> = ({
     }
   }, [open]);
 
-  const validateAndDone = useCallback(async () => {
+  const validateAndDone = async () => {
     if (user) {
       try {
         setFieldErrors(undefined);
@@ -72,7 +72,7 @@ const User: FC<UserFormProps> = ({
         setFieldErrors((error as ValidationError).fieldErrors);
       }
     }
-  }, [user, validator, onDoneEditing]);
+  };
 
   return (
     <Dialog

interface/src/app/status/Activity.tsx

@@ -1,5 +1,3 @@
-import { useCallback, useMemo } from 'react';
-
 import {
   Body,
   Cell,
@@ -36,16 +34,14 @@ const SystemActivity = () => {
 
   useLayoutTitle(LL.DATA_TRAFFIC());
 
-  const stats_theme = tableTheme(
+  const stats_theme = tableTheme({
-    useMemo(
+    Table: `
-      () => ({
-        Table: `
       --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 90px 90px 80px;
     `,
-        BaseRow: `
+    BaseRow: `
       font-size: 14px;
     `,
-        HeaderRow: `
+    HeaderRow: `
       text-transform: uppercase;
       background-color: black;
       color: #90CAF9;
@@ -55,7 +51,7 @@ const SystemActivity = () => {
         border-bottom: 1px solid #565656;
       }
     `,
-        Row: `
+    Row: `
       .td {
         padding: 8px;
         border-top: 1px solid #565656;
@@ -69,26 +65,20 @@ const SystemActivity = () => {
         background-color: #1e1e1e;
       }
     `,
-        BaseCell: `
+    BaseCell: `
       &:not(:first-of-type) {
         text-align: center;
       }
     `
-      }),
+  });
-      []
-    )
-  );
 
-  const showName = useCallback(
+  const showName = (id: number) => {
-    (id: number) => {
+    const name: keyof Translation['STATUS_NAMES'] =
-      const name: keyof Translation['STATUS_NAMES'] =
+      id.toString() as keyof Translation['STATUS_NAMES'];
-        id.toString() as keyof Translation['STATUS_NAMES'];
+    return LL.STATUS_NAMES[name]();
-      return LL.STATUS_NAMES[name]();
+  };
-    },
-    [LL]
-  );
 
-  const showQuality = useCallback((stat: Stat) => {
+  const showQuality = (stat: Stat) => {
     if (stat.q === 0 || stat.s + stat.f === 0) {
       return;
     }
@@ -100,14 +90,18 @@ const SystemActivity = () => {
     } else {
       return <div style={{ color: QUALITY_COLORS.POOR }}>{stat.q}%</div>;
     }
-  }, []);
+  };
-
-  const content = useMemo(() => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
-    }
 
+  if (!data) {
     return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
+  }
+
+  return (
+    <SectionContent>
       <Table
         data={{ nodes: data.stats }}
         theme={stats_theme}
@@ -136,10 +130,8 @@ const SystemActivity = () => {
           </>
         )}
       </Table>
-    );
+    </SectionContent>
-  }, [data, loadData, error?.message, stats_theme, LL, showName, showQuality]);
+  );
-
-  return <SectionContent>{content}</SectionContent>;
 };
 
 export default SystemActivity;

interface/src/app/status/MqttStatus.tsx

@@ -1,4 +1,4 @@
-import { type FC, memo, useMemo } from 'react';
+import { type FC, memo } from 'react';
 
 import AutoAwesomeMotionIcon from '@mui/icons-material/AutoAwesomeMotion';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
@@ -127,16 +127,15 @@ const MqttStatus = () => {
     void loadData();
   });
 
-  // Memoize error message separately to avoid re-renders on error object changes
   const errorMessage = error?.message || '';
 
-  const mqttStatusText = useMemo(() => {
+  const mqttStatusText = !data
-    if (!data) return '';
+    ? ''
-    if (!data.enabled) return LL.NOT_ENABLED();
+    : !data.enabled
-    return data.connected
+      ? LL.NOT_ENABLED()
-      ? `${LL.CONNECTED(0)} (${data.connect_count})`
+      : data.connected
-      : `${LL.DISCONNECTED()} (${data.connect_count})`;
+        ? `${LL.CONNECTED(0)} (${data.connect_count})`
-  }, [data, LL]);
+        : `${LL.DISCONNECTED()} (${data.connect_count})`;
 
   if (!data) {
     return (

interface/src/app/status/NTPStatus.tsx

@@ -1,5 +1,3 @@
-import { useMemo } from 'react';
-
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import DnsIcon from '@mui/icons-material/Dns';
 import SwapVerticalCircleIcon from '@mui/icons-material/SwapVerticalCircle';
@@ -67,12 +65,16 @@ const NTPStatus = () => {
     }
   };
 
-  const content = useMemo(() => {
+  if (!data) {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
-    }
-
     return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
+  }
+
+  return (
+    <SectionContent>
       <List>
         <ListItem>
           <ListItemAvatar>
@@ -121,10 +123,8 @@ const NTPStatus = () => {
         </ListItem>
         <Divider variant="inset" component="li" />
       </List>
-    );
+    </SectionContent>
-  }, [data, error, loadData, LL, theme]);
+  );
-
-  return <SectionContent>{content}</SectionContent>;
 };
 
 export default NTPStatus;

interface/src/app/status/NetworkStatus.tsx

@@ -1,5 +1,3 @@
-import { useMemo } from 'react';
-
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import DnsIcon from '@mui/icons-material/Dns';
 import GiteIcon from '@mui/icons-material/Gite';
@@ -124,16 +122,20 @@ const NetworkStatus = () => {
 
   const theme = useTheme();
 
-  const content = useMemo(() => {
+  if (!data) {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
-    }
-
-    const statusText = getNetworkStatusText(data.status, data.reconnect_count, LL);
-    const statusColor = networkStatusHighlight(data, theme);
-    const qualityColor = networkQualityHighlight(data, theme);
-
     return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
+  }
+
+  const statusText = getNetworkStatusText(data.status, data.reconnect_count, LL);
+  const statusColor = networkStatusHighlight(data, theme);
+  const qualityColor = networkQualityHighlight(data, theme);
+
+  return (
+    <SectionContent>
       <List>
         <ListItem>
           <ListItemAvatar>
@@ -227,10 +229,8 @@ const NetworkStatus = () => {
           </>
         )}
       </List>
-    );
+    </SectionContent>
-  }, [data, error, loadData, LL, theme]);
+  );
-
-  return <SectionContent>{content}</SectionContent>;
 };
 
 export default NetworkStatus;

interface/src/app/status/Status.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useMemo, useState } from 'react';
+import { useContext, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
@@ -43,7 +43,6 @@ import { formatDateTime } from 'utils/time';
 
 import SystemMonitor from './SystemMonitor';
 
-// Pure functions moved outside component to avoid recreation on each render
 const formatNumber = (num: number) => new Intl.NumberFormat().format(num);
 
 const formatDurationSec = (
@@ -97,10 +96,8 @@ const SystemStatus = () => {
 
   const theme = useTheme();
 
-  // Memoize derived status values to avoid recalculation on every render
+  const busStatus = (() => {
-  const busStatus = useMemo(() => {
     if (!data) return 'EMS state unknown';
-
     switch (data.bus_status) {
       case busConnectionStatus.BUS_STATUS_CONNECTED:
         return `EMS ${LL.CONNECTED(0)} (${formatDurationSec(data.bus_uptime, LL)})`;
@@ -111,12 +108,10 @@ const SystemStatus = () => {
       default:
         return 'EMS state unknown';
     }
-  }, [data?.bus_status, data?.bus_uptime, LL]);
+  })();
 
-  // Memoize derived status values to avoid recalculation on every render
+  const systemStatus = (() => {
-  const systemStatus = useMemo(() => {
     if (!data) return '??';
-
     switch (data.status) {
       case SystemStatusCodes.SYSTEM_STATUS_PENDING_UPLOAD:
       case SystemStatusCodes.SYSTEM_STATUS_UPLOADING:
@@ -129,14 +124,12 @@ const SystemStatus = () => {
       case SystemStatusCodes.SYSTEM_STATUS_INVALID_GPIO:
         return LL.GPIO_OF(LL.FAILED(0));
       default:
-        // SystemStatusCodes.SYSTEM_STATUS_NORMAL
         return 'OK';
     }
-  }, [data?.status, LL]);
+  })();
 
-  const busStatusHighlight = useMemo(() => {
+  const busStatusHighlight = (() => {
     if (!data) return theme.palette.warning.main;
-
     switch (data.bus_status) {
       case busConnectionStatus.BUS_STATUS_TX_ERRORS:
         return theme.palette.warning.main;
@@ -147,11 +140,10 @@ const SystemStatus = () => {
       default:
         return theme.palette.warning.main;
     }
-  }, [data?.bus_status, theme.palette]);
+  })();
 
-  const ntpStatus = useMemo(() => {
+  const ntpStatus = (() => {
     if (!data) return LL.UNKNOWN();
-
     switch (data.ntp_status) {
       case NTPSyncStatus.NTP_DISABLED:
         return LL.NOT_ENABLED();
@@ -164,11 +156,10 @@ const SystemStatus = () => {
       default:
         return LL.UNKNOWN();
     }
-  }, [data?.ntp_status, data?.ntp_time, LL]);
+  })();
 
-  const ntpStatusHighlight = useMemo(() => {
+  const ntpStatusHighlight = (() => {
     if (!data) return theme.palette.error.main;
-
     switch (data.ntp_status) {
       case NTPSyncStatus.NTP_DISABLED:
         return theme.palette.info.main;
@@ -179,11 +170,10 @@ const SystemStatus = () => {
       default:
         return theme.palette.error.main;
     }
-  }, [data?.ntp_status, theme.palette]);
+  })();
 
-  const networkStatusHighlight = useMemo(() => {
+  const networkStatusHighlight = (() => {
     if (!data) return theme.palette.warning.main;
-
     switch (data.network_status) {
       case NetworkConnectionStatus.WIFI_STATUS_IDLE:
       case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
@@ -198,11 +188,10 @@ const SystemStatus = () => {
       default:
         return theme.palette.warning.main;
     }
-  }, [data?.network_status, theme.palette]);
+  })();
 
-  const networkStatus = useMemo(() => {
+  const networkStatus = (() => {
     if (!data) return LL.UNKNOWN();
-
     switch (data.network_status) {
       case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
         return LL.INACTIVE(1);
@@ -223,15 +212,12 @@ const SystemStatus = () => {
       default:
         return LL.UNKNOWN();
     }
-  }, [data?.network_status, data?.wifi_rssi, LL]);
+  })();
 
-  const activeHighlight = useCallback(
+  const activeHighlight = (value: boolean) =>
-    (value: boolean) =>
+    value ? theme.palette.success.main : theme.palette.info.main;
-      value ? theme.palette.success.main : theme.palette.info.main,
-    [theme.palette]
-  );
 
-  const doRestart = useCallback(async () => {
+  const doRestart = async () => {
     setConfirmRestart(false);
     setRestarting(true);
     await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
@@ -239,14 +225,123 @@ const SystemStatus = () => {
         toast.error(error.message);
       }
     );
-  }, [sendAPI]);
+  };
 
-  const handleCloseRestartDialog = useCallback(() => {
+  const handleCloseRestartDialog = () => setConfirmRestart(false);
-    setConfirmRestart(false);
+
-  }, []);
+  if (restarting) {
+    return <SystemMonitor />;
+  }
+
+  if (!data || !LL) {
+    return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
+  }
+
+  return (
+    <SectionContent>
+      <List>
+        <ListMenuItem
+          icon={BuildIcon}
+          bgcolor="#72caf9"
+          label="EMS-ESP Firmware"
+          text={`v${data.emsesp_version || ''}`}
+          to="version"
+        />
+
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar sx={{ bgcolor: '#c5572c', color: 'white' }}>
+              <MonitorHeartIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText
+            primary={LL.STATUS_OF(LL.SYSTEM(0))}
+            secondary={`${systemStatus} (${LL.UPTIME()}: ${formatDurationSec(data.uptime, LL)})`}
+          />
+          {me.admin && (
+            <Button
+              startIcon={<PowerSettingsNewIcon />}
+              variant="outlined"
+              color="error"
+              onClick={() => setConfirmRestart(true)}
+            >
+              {LL.RESTART()}
+            </Button>
+          )}
+        </ListItem>
+
+        <ListMenuItem
+          disabled={!me.admin}
+          icon={MemoryIcon}
+          bgcolor="#68374d"
+          label={LL.HARDWARE()}
+          text={`${formatNumber(data.free_heap)} KB ${LL.FREE_MEMORY()}`}
+          to="/status/hardwarestatus"
+        />
+
+        <ListMenuItem
+          disabled={!me.admin}
+          icon={DirectionsBusIcon}
+          bgcolor={busStatusHighlight}
+          label={LL.DATA_TRAFFIC()}
+          text={busStatus}
+          to="/status/activity"
+        />
+
+        <ListMenuItem
+          disabled={!me.admin}
+          icon={
+            data.network_status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED
+              ? WifiIcon
+              : RouterIcon
+          }
+          bgcolor={networkStatusHighlight}
+          label={LL.NETWORK(1)}
+          text={networkStatus}
+          to="/status/network"
+        />
+
+        <ListMenuItem
+          disabled={!me.admin}
+          icon={DeviceHubIcon}
+          bgcolor={activeHighlight(data.mqtt_status)}
+          label="MQTT"
+          text={data.mqtt_status ? LL.CONNECTED(0) : LL.INACTIVE(0)}
+          to="/status/mqtt"
+        />
+
+        <ListMenuItem
+          disabled={!me.admin}
+          icon={AccessTimeIcon}
+          bgcolor={ntpStatusHighlight}
+          label="NTP"
+          text={ntpStatus}
+          to="/status/ntp"
+        />
+
+        <ListMenuItem
+          disabled={!me.admin}
+          icon={SettingsInputAntennaIcon}
+          bgcolor={activeHighlight(data.ap_status)}
+          label={LL.ACCESS_POINT(0)}
+          text={data.ap_status ? LL.ACTIVE() : LL.INACTIVE(0)}
+          to="/status/ap"
+        />
+
+        <ListMenuItem
+          disabled={!me.admin}
+          icon={LogoDevIcon}
+          bgcolor="#40828f"
+          label={LL.LOG_OF(LL.SYSTEM(0))}
+          text={LL.VIEW_LOG()}
+          to="/status/log"
+        />
+      </List>
 
-  const renderRestartDialog = useMemo(
-    () => (
       <Dialog
         sx={dialogStyle}
         open={confirmRestart}
@@ -273,177 +368,8 @@ const SystemStatus = () => {
           </Button>
         </DialogActions>
       </Dialog>
-    ),
+    </SectionContent>
-    [confirmRestart, handleCloseRestartDialog, doRestart, LL]
   );
-
-  // Memoize formatted values
-  const firmwareVersion = useMemo(
-    () => `v${data?.emsesp_version || ''}`,
-    [data?.emsesp_version]
-  );
-
-  const uptimeText = useMemo(
-    () => (data ? formatDurationSec(data.uptime, LL) : ''),
-    [data?.uptime, LL]
-  );
-
-  const freeMemoryText = useMemo(
-    () => (data ? `${formatNumber(data.free_heap)} KB ${LL.FREE_MEMORY()}` : ''),
-    [data?.free_heap, LL]
-  );
-
-  const networkIcon = useMemo(
-    () =>
-      data?.network_status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED
-        ? WifiIcon
-        : RouterIcon,
-    [data?.network_status]
-  );
-
-  const mqttStatusText = useMemo(
-    () => (data?.mqtt_status ? LL.CONNECTED(0) : LL.INACTIVE(0)),
-    [data?.mqtt_status, LL]
-  );
-
-  const apStatusText = useMemo(
-    () => (data?.ap_status ? LL.ACTIVE() : LL.INACTIVE(0)),
-    [data?.ap_status, LL]
-  );
-
-  const handleRestartClick = useCallback(() => {
-    setConfirmRestart(true);
-  }, []);
-
-  const content = useMemo(() => {
-    if (!data || !LL) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
-    }
-
-    return (
-      <>
-        <List>
-          <ListMenuItem
-            icon={BuildIcon}
-            bgcolor="#72caf9"
-            label="EMS-ESP Firmware"
-            text={firmwareVersion}
-            to="version"
-          />
-
-          <ListItem>
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: '#c5572c', color: 'white' }}>
-                <MonitorHeartIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText
-              primary={LL.STATUS_OF(LL.SYSTEM(0))}
-              secondary={`${systemStatus} (${LL.UPTIME()}: ${uptimeText})`}
-            />
-            {me.admin && (
-              <Button
-                startIcon={<PowerSettingsNewIcon />}
-                variant="outlined"
-                color="error"
-                onClick={handleRestartClick}
-              >
-                {LL.RESTART()}
-              </Button>
-            )}
-          </ListItem>
-
-          <ListMenuItem
-            disabled={!me.admin}
-            icon={MemoryIcon}
-            bgcolor="#68374d"
-            label={LL.HARDWARE()}
-            text={freeMemoryText}
-            to="/status/hardwarestatus"
-          />
-
-          <ListMenuItem
-            disabled={!me.admin}
-            icon={DirectionsBusIcon}
-            bgcolor={busStatusHighlight}
-            label={LL.DATA_TRAFFIC()}
-            text={busStatus}
-            to="/status/activity"
-          />
-
-          <ListMenuItem
-            disabled={!me.admin}
-            icon={networkIcon}
-            bgcolor={networkStatusHighlight}
-            label={LL.NETWORK(1)}
-            text={networkStatus}
-            to="/status/network"
-          />
-
-          <ListMenuItem
-            disabled={!me.admin}
-            icon={DeviceHubIcon}
-            bgcolor={activeHighlight(data.mqtt_status)}
-            label="MQTT"
-            text={mqttStatusText}
-            to="/status/mqtt"
-          />
-
-          <ListMenuItem
-            disabled={!me.admin}
-            icon={AccessTimeIcon}
-            bgcolor={ntpStatusHighlight}
-            label="NTP"
-            text={ntpStatus}
-            to="/status/ntp"
-          />
-
-          <ListMenuItem
-            disabled={!me.admin}
-            icon={SettingsInputAntennaIcon}
-            bgcolor={activeHighlight(data.ap_status)}
-            label={LL.ACCESS_POINT(0)}
-            text={apStatusText}
-            to="/status/ap"
-          />
-
-          <ListMenuItem
-            disabled={!me.admin}
-            icon={LogoDevIcon}
-            bgcolor="#40828f"
-            label={LL.LOG_OF(LL.SYSTEM(0))}
-            text={LL.VIEW_LOG()}
-            to="/status/log"
-          />
-        </List>
-
-        {renderRestartDialog}
-      </>
-    );
-  }, [
-    data,
-    LL,
-    firmwareVersion,
-    uptimeText,
-    freeMemoryText,
-    networkIcon,
-    mqttStatusText,
-    apStatusText,
-    busStatus,
-    busStatusHighlight,
-    networkStatusHighlight,
-    networkStatus,
-    ntpStatusHighlight,
-    ntpStatus,
-    activeHighlight,
-    me.admin,
-    handleRestartClick,
-    error,
-    loadData,
-    renderRestartDialog
-  ]);
-
-  return restarting ? <SystemMonitor /> : <SectionContent>{content}</SectionContent>;
 };
 
 export default SystemStatus;

interface/src/app/status/SystemLog.tsx

@@ -1,11 +1,4 @@
-import {
+import { memo, useEffect, useLayoutEffect, useRef, useState } from 'react';
-  memo,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState
-} from 'react';
 import { toast } from 'react-toastify';
 
 import DownloadIcon from '@mui/icons-material/GetApp';
@@ -185,8 +178,7 @@ const SystemLog = () => {
     };
   }, [data]); // Recalculate when data changes (in case layout shifts)
 
-  // Memoize message handler to avoid recreating on every render
+  const handleLogMessage = (message: { data: string }) => {
-  const handleLogMessage = useCallback((message: { data: string }) => {
     const rawData = message.data;
     const logentry = JSON.parse(rawData) as LogEntry;
     setLogEntries((log) => {
@@ -200,7 +192,7 @@ const SystemLog = () => {
       const newLog = [...log, logentry];
       return newLog;
     });
-  }, []);
+  };
 
   useSSE(fetchLogES, {
     immediate: true,
@@ -211,7 +203,7 @@ const SystemLog = () => {
       toast.error('No connection to Log service');
     });
 
-  const onDownload = useCallback(() => {
+  const onDownload = () => {
     const result = logEntries
       .map((i) => `${i.t} ${levelLabel(i.l)} ${i.i}: [${i.n}] ${i.m}`)
       .join('\n');
@@ -225,11 +217,11 @@ const SystemLog = () => {
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
-  }, [logEntries]);
+  };
 
-  const saveSettings = useCallback(async () => {
+  const saveSettings = async () => {
     await saveData();
-  }, [saveData]);
+  };
 
   // handle scrolling - optimized to only scroll when needed
   const ref = useRef<HTMLDivElement>(null);
@@ -246,7 +238,7 @@ const SystemLog = () => {
     }
   }, [logEntries.length, autoscroll]);
 
-  const sendReadCommand = useCallback(() => {
+  const sendReadCommand = () => {
     if (readValue === '') {
       setReadOpen(!readOpen);
       return;
@@ -257,7 +249,7 @@ const SystemLog = () => {
       setReadOpen(false);
       setReadValue('');
     }
-  }, [readValue, readOpen, send]);
+  };
 
   const content = () => {
     if (!data) {

interface/src/app/status/SystemMonitor.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import { Box, Button, Typography } from '@mui/material';
@@ -57,39 +57,31 @@ const SystemMonitor = () => {
     void send();
   }, 1000); // check every 1 second
 
-  const { statusMessage, isUploading, progressValue } = useMemo(() => {
+  const status = data?.status;
-    const status = data?.status;
 
-    const message =
+  const statusMessage =
-      status && status >= SystemStatusCodes.SYSTEM_STATUS_UPLOADING
+    status && status >= SystemStatusCodes.SYSTEM_STATUS_UPLOADING
-        ? LL.WAIT_FIRMWARE()
+      ? LL.WAIT_FIRMWARE()
-        : status === SystemStatusCodes.SYSTEM_STATUS_PENDING_RESTART
+      : status === SystemStatusCodes.SYSTEM_STATUS_PENDING_RESTART
-          ? LL.APPLICATION_RESTARTING()
+        ? LL.APPLICATION_RESTARTING()
-          : status === SystemStatusCodes.SYSTEM_STATUS_NORMAL
+        : status === SystemStatusCodes.SYSTEM_STATUS_NORMAL
-            ? LL.RESTARTING_PRE()
+          ? LL.RESTARTING_PRE()
-            : status === SystemStatusCodes.SYSTEM_STATUS_ERROR_UPLOAD
+          : status === SystemStatusCodes.SYSTEM_STATUS_ERROR_UPLOAD
-              ? 'Upload Failed'
+            ? 'Upload Failed'
-              : LL.RESTARTING_POST();
+            : LL.RESTARTING_POST();
 
-    const uploading =
+  const isUploading =
-      status !== undefined && status >= SystemStatusCodes.SYSTEM_STATUS_UPLOADING;
+    status !== undefined && status >= SystemStatusCodes.SYSTEM_STATUS_UPLOADING;
-    const progress =
+  const progressValue =
-      uploading && status
+    isUploading && status
-        ? Math.round(status - SystemStatusCodes.SYSTEM_STATUS_UPLOADING)
+      ? Math.round(status - SystemStatusCodes.SYSTEM_STATUS_UPLOADING)
-        : 0;
+      : 0;
 
-    return {
+  const onCancel = async () => {
-      statusMessage: message,
-      isUploading: uploading,
-      progressValue: progress
-    };
-  }, [data?.status, LL]);
-
-  const onCancel = useCallback(async () => {
     setErrorMessage(undefined);
     await setSystemStatus(String(SystemStatusCodes.SYSTEM_STATUS_NORMAL));
     document.location.href = '/';
-  }, [setSystemStatus]);
+  };
 
   return (
     <Box

interface/src/app/status/Version.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useContext, useMemo, useState } from 'react';
+import { memo, useContext, useState } from 'react';
 import { Link } from 'react-router';
 import { toast } from 'react-toastify';
 
@@ -105,9 +105,9 @@ const VersionInfoDialog = memo(
     onClose
   }: {
     showVersionInfo: number;
-    latestVersion?: VersionInfo;
+    latestVersion: VersionInfo | undefined;
-    latestDevVersion?: VersionInfo;
+    latestDevVersion: VersionInfo | undefined;
-    partitionVersion?: VersionInfo | undefined;
+    partitionVersion: VersionInfo | undefined;
     partition: string;
     currentPartition: string;
     size: number;
@@ -224,7 +224,7 @@ const VersionInfoDialog = memo(
                   </TableCell>
                 </TableRow>
               )}
-              {version.date && (
+              {version && version.date && (
                 <TableRow sx={{ height: 24, borderBottom: 'none' }}>
                   <TableCell
                     component="th"
@@ -283,8 +283,8 @@ const InstallDialog = memo(
   }: {
     openInstallDialog: boolean;
     fetchDevVersion: boolean;
-    latestVersion?: VersionInfo;
+    latestVersion: VersionInfo | undefined;
-    latestDevVersion?: VersionInfo;
+    latestDevVersion: VersionInfo | undefined;
     upgradeImportantMessageType: number;
     downloadOnly: boolean;
     platform: string;
@@ -292,16 +292,14 @@ const InstallDialog = memo(
     onClose: () => void;
     onInstall: (url: string) => void;
   }) => {
-    const binURL = useMemo(() => {
+    const binURL = (() => {
       if (!latestVersion || !latestDevVersion) return '';
-
       const version = fetchDevVersion ? latestDevVersion : latestVersion;
       const filename = `EMS-ESP-${version.version.replaceAll('.', '_')}-${platform}.bin`;
-
       return fetchDevVersion
         ? `${DEV_URL}${filename}`
         : `${STABLE_URL}v${version.version}/${filename}`;
-    }, [fetchDevVersion, latestVersion, latestDevVersion, platform]);
+    })();
 
     return (
       <Dialog sx={dialogStyle} open={openInstallDialog} onClose={onClose}>
@@ -532,396 +530,340 @@ const Version = () => {
       toast.error(String(error.error?.message || 'An error occurred'));
     });
 
-  const platform = useMemo(() => (data ? getPlatform(data) : ''), [data]);
+  const platform = data ? getPlatform(data) : '';
 
-  const otherPartitions = useMemo(
+  const otherPartitions =
-    () => data?.partitions.filter((p) => p.partition !== data.partition) ?? [],
+    data?.partitions.filter((p) => p.partition !== data.partition) ?? [];
-    [data]
-  );
 
-  const setPartitionVersionInfo = useCallback(
+  const setPartitionVersionInfo = (partition: string) => {
-    (partition: string) => {
+    setShowVersionInfo(3);
-      setShowVersionInfo(3);
+    const partitionData = data?.partitions.find((p) => p.partition === partition);
+    if (partitionData) {
+      setPartitionVersion({
+        version: partitionData.version,
+        date: partitionData.install_date ?? ''
+      });
+      setPartition(partitionData.partition);
+      setFirmwareSize(partitionData.size);
+    }
+  };
 
-      // search for the partition in the data.partitions array
+  const doRestart = async () => {
-      const partitionData = data?.partitions.find((p) => p.partition === partition);
-      if (partitionData) {
-        setPartitionVersion({
-          version: partitionData.version,
-          date: partitionData.install_date ?? ''
-        });
-        setPartition(partitionData.partition);
-        setFirmwareSize(partitionData.size);
-      }
-    },
-    [data]
-  );
-
-  const doRestart = useCallback(async () => {
     await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
       (error: Error) => {
         toast.error(error.message);
       }
     );
     setRestarting(true);
-  }, [sendAPI]);
+  };
 
-  const installFirmwareURL = useCallback(
+  const installFirmwareURL = async (url: string) => {
-    async (url: string) => {
+    await sendUploadURL(url).catch((error: Error) => {
-      await sendUploadURL(url).catch((error: Error) => {
+      toast.error(error.message);
-        toast.error(error.message);
+    });
-      });
+    await doRestart();
-      await doRestart();
+  };
-    },
-    [sendUploadURL, doRestart]
-  );
 
-  const installPartitionFirmware = useCallback(
+  const installPartitionFirmware = async (partition: string) => {
-    async (partition: string) => {
+    await sendSetPartition(partition).catch((error: Error) => {
-      await sendSetPartition(partition).catch((error: Error) => {
+      toast.error(error.message);
-        toast.error(error.message);
+    });
-      });
+    setRestarting(true);
-      setRestarting(true);
+  };
-    },
-    [sendSetPartition]
-  );
 
-  const showPartitionDialog = useCallback(
+  const showPartitionDialog = (
-    (version: string, partition: string, install_date: string) => {
+    version: string,
-      setOpenInstallPartitionDialog(true);
+    partition: string,
-      setPartitionVersion({ version: version, date: install_date });
+    install_date: string
-      setPartition(partition);
+  ) => {
-    },
+    setOpenInstallPartitionDialog(true);
-    []
+    setPartitionVersion({ version: version, date: install_date });
-  );
+    setPartition(partition);
+  };
 
-  const showFirmwareDialog = useCallback(
+  const showFirmwareDialog = (useDevVersion: boolean) => {
-    (useDevVersion: boolean) => {
+    setFetchDevVersion(useDevVersion);
-      setFetchDevVersion(useDevVersion);
+    const targetVersion = useDevVersion
-      void checkUpgradeImportantMessages(
+      ? latestDevVersion?.version
-        useDevVersion ? latestDevVersion?.version : latestVersion?.version
+      : latestVersion?.version;
-      );
+    if (targetVersion) {
-      setOpenInstallDialog(true);
+      void checkUpgradeImportantMessages(targetVersion);
-    },
+    }
-    [latestDevVersion, latestVersion, fetchDevVersion]
+    setOpenInstallDialog(true);
-  );
+  };
 
-  const closeInstallDialog = useCallback(() => {
+  const closeInstallDialog = () => setOpenInstallDialog(false);
-    setOpenInstallDialog(false);
+  const closeInstallPartitionDialog = () => setOpenInstallPartitionDialog(false);
-  }, []);
 
-  const closeInstallPartitionDialog = useCallback(() => {
+  const handleVersionInfoClose = () => {
-    setOpenInstallPartitionDialog(false);
-  }, []);
-
-  const handleVersionInfoClose = useCallback(() => {
     setShowVersionInfo(0);
     setPartitionVersion(undefined);
     setPartition('');
-  }, []);
+  };
 
   useLayoutTitle('EMS-ESP Firmware');
 
-  const showButtons = useCallback(
+  const showButtons = (showingDev: boolean) => {
-    (showingDev: boolean) => {
+    const choice = showingDev
-      const choice = showingDev
+      ? !usingDevVersion
-        ? !usingDevVersion
+        ? LL.SWITCH_RELEASE_TYPE(LL.DEVELOPMENT())
-          ? LL.SWITCH_RELEASE_TYPE(LL.DEVELOPMENT())
+        : devUpgradeAvailable
-          : devUpgradeAvailable
+          ? LL.UPDATE_AVAILABLE()
-            ? LL.UPDATE_AVAILABLE()
+          : undefined
-            : undefined
+      : usingDevVersion
-        : usingDevVersion
+        ? LL.SWITCH_RELEASE_TYPE(LL.STABLE())
-          ? LL.SWITCH_RELEASE_TYPE(LL.STABLE())
+        : stableUpgradeAvailable
-          : stableUpgradeAvailable
+          ? LL.UPDATE_AVAILABLE()
-            ? LL.UPDATE_AVAILABLE()
+          : undefined;
-            : undefined;
-
-      if (!choice) {
-        return (
-          <>
-            <CheckIcon
-              color="success"
-              sx={{ verticalAlign: 'middle', ml: 0.5, mr: 0.5 }}
-            />
-            <span style={{ color: '#66bb6a', fontSize: '0.8em' }}>
-              {LL.LATEST_VERSION(usingDevVersion ? LL.DEVELOPMENT() : LL.STABLE())}
-            </span>
-            <Button
-              sx={{ ml: 1 }}
-              variant="outlined"
-              size="small"
-              onClick={() => showFirmwareDialog(showingDev)}
-            >
-              {LL.REINSTALL()}
-            </Button>
-          </>
-        );
-      }
-
-      if (!me.admin) return null;
 
+    if (!choice) {
       return (
-        <Button
+        <>
-          sx={{ ml: 1 }}
+          <CheckIcon
-          variant="outlined"
+            color="success"
-          color={choice === LL.UPDATE_AVAILABLE() ? 'success' : 'warning'}
+            sx={{ verticalAlign: 'middle', ml: 0.5, mr: 0.5 }}
-          size="small"
+          />
-          onClick={() => showFirmwareDialog(showingDev)}
+          <span style={{ color: '#66bb6a', fontSize: '0.8em' }}>
-        >
+            {LL.LATEST_VERSION(usingDevVersion ? LL.DEVELOPMENT() : LL.STABLE())}
-          {choice}
+          </span>
-        </Button>
+          <Button
+            sx={{ ml: 1 }}
+            variant="outlined"
+            size="small"
+            onClick={() => showFirmwareDialog(showingDev)}
+          >
+            {LL.REINSTALL()}
+          </Button>
+        </>
       );
-    },
-    [
-      usingDevVersion,
-      devUpgradeAvailable,
-      stableUpgradeAvailable,
-      me.admin,
-      LL,
-      showFirmwareDialog
-    ]
-  );
-
-  const content = useMemo(() => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
     }
 
+    if (!me.admin) return null;
+
     return (
-      <>
+      <Button
-        <Box sx={{ p: 2, border: '1px solid #565656', borderRadius: 2 }}>
+        sx={{ ml: 1 }}
-          <Typography sx={{ mb: 1 }} variant="h6" color="primary">
+        variant="outlined"
-            {LL.THIS_VERSION()}
+        color={choice === LL.UPDATE_AVAILABLE() ? 'success' : 'warning'}
-          </Typography>
+        size="small"
+        onClick={() => showFirmwareDialog(showingDev)}
+      >
+        {choice}
+      </Button>
+    );
+  };
 
-          <Grid
+  if (restarting) {
-            container
+    return <SystemMonitor />;
-            direction="row"
+  }
-            sx={{
-              justifyContent: 'flex-start',
-              alignItems: 'baseline'
-            }}
-          >
-            <Grid size={{ xs: 4, md: 2 }}>
-              <Typography color="secondary">{LL.VERSION()}</Typography>
-            </Grid>
-            <Grid size={{ xs: 8, md: 10 }}>
-              <Typography>
-                {data.emsesp_version}
-                {data.build_flags && (
-                  <Typography variant="caption">
-                    &nbsp; &#40;{data.build_flags}&#41;
-                  </Typography>
-                )}
-                <IconButton
-                  onClick={() => setPartitionVersionInfo(data.partition)}
-                  aria-label={LL.FIRMWARE_VERSION_INFO()}
-                >
-                  <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
-                </IconButton>
-              </Typography>
-            </Grid>
 
-            <Grid size={{ xs: 4, md: 2 }}>
+  if (!data) {
-              <Typography color="secondary">{LL.PLATFORM()}</Typography>
+    return (
-            </Grid>
+      <SectionContent>
-            <Grid size={{ xs: 8, md: 10 }}>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
-              <Typography>
+      </SectionContent>
-                {platform}
+    );
+  }
+
+  return (
+    <SectionContent>
+      <Box sx={{ p: 2, border: '1px solid #565656', borderRadius: 2 }}>
+        <Typography sx={{ mb: 1 }} variant="h6" color="primary">
+          {LL.THIS_VERSION()}
+        </Typography>
+
+        <Grid
+          container
+          direction="row"
+          sx={{
+            justifyContent: 'flex-start',
+            alignItems: 'baseline'
+          }}
+        >
+          <Grid size={{ xs: 4, md: 2 }}>
+            <Typography color="secondary">{LL.VERSION()}</Typography>
+          </Grid>
+          <Grid size={{ xs: 8, md: 10 }}>
+            <Typography>
+              {data.emsesp_version}
+              {data.build_flags && (
                 <Typography variant="caption">
-                  &nbsp; &#40;
+                  &nbsp; &#40;{data.build_flags}&#41;
-                  {data.psram ? (
-                    <CheckIcon
-                      color="success"
-                      sx={{
-                        fontSize: '1.5em',
-                        verticalAlign: 'middle'
-                      }}
-                    />
-                  ) : (
-                    <CloseIcon
-                      color="error"
-                      sx={{
-                        fontSize: '1.5em',
-                        verticalAlign: 'middle'
-                      }}
-                    />
-                  )}
-                  PSRAM&#41;
                 </Typography>
-              </Typography>
+              )}
-            </Grid>
+              <IconButton
+                onClick={() => setPartitionVersionInfo(data.partition)}
+                aria-label={LL.FIRMWARE_VERSION_INFO()}
+              >
+                <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
+              </IconButton>
+            </Typography>
           </Grid>
 
-          {internetLive ? (
+          <Grid size={{ xs: 4, md: 2 }}>
-            <>
+            <Typography color="secondary">{LL.PLATFORM()}</Typography>
-              <Typography sx={{ mt: 4, mb: 1 }} variant="h6" color="primary">
+          </Grid>
-                {LL.AVAILABLE_VERSION()}
+          <Grid size={{ xs: 8, md: 10 }}>
-              </Typography>
+            <Typography>
-
+              {platform}
-              <Grid
+              <Typography variant="caption">
-                container
+                &nbsp; &#40;
-                direction="row"
+                {data.psram ? (
-                rowSpacing={1}
+                  <CheckIcon
-                sx={{
+                    color="success"
-                  justifyContent: 'flex-start',
+                    sx={{
-                  alignItems: 'baseline'
+                      fontSize: '1.5em',
-                }}
+                      verticalAlign: 'middle'
-              >
+                    }}
-                {otherPartitions.length > 0 && data.developer_mode && (
+                  />
-                  <>
+                ) : (
-                    <Grid size={{ xs: 4, md: 2 }}>
+                  <CloseIcon
-                      <Typography color="secondary">
+                    color="error"
-                        {LL.STORED_VERSIONS()}
+                    sx={{
-                      </Typography>
+                      fontSize: '1.5em',
-                    </Grid>
+                      verticalAlign: 'middle'
-                    <Grid size={{ xs: 8, md: 10 }}>
+                    }}
-                      {otherPartitions.map((partition) => (
+                  />
-                        <Typography key={partition.partition} sx={{ mb: 1 }}>
-                          {partition.version}
-                          <IconButton
-                            onClick={() =>
-                              setPartitionVersionInfo(partition.partition)
-                            }
-                            aria-label={LL.FIRMWARE_VERSION_INFO()}
-                          >
-                            <InfoOutlinedIcon
-                              color="primary"
-                              sx={{ fontSize: 18 }}
-                            />
-                          </IconButton>
-                          <Button
-                            sx={{ ml: 0 }}
-                            variant="outlined"
-                            size="small"
-                            onClick={() =>
-                              showPartitionDialog(
-                                partition.version,
-                                partition.partition,
-                                partition.install_date ?? ''
-                              )
-                            }
-                          >
-                            {LL.INSTALL()}
-                          </Button>
-                        </Typography>
-                      ))}
-                    </Grid>
-                  </>
                 )}
-                <Grid size={{ xs: 4, md: 2 }}>
+                PSRAM&#41;
-                  <Typography color="secondary">{LL.STABLE()}</Typography>
-                </Grid>
-                <Grid size={{ xs: 8, md: 10 }}>
-                  <Typography>
-                    {latestVersion?.version}
-                    <IconButton
-                      onClick={() => setShowVersionInfo(1)}
-                      aria-label={LL.FIRMWARE_VERSION_INFO()}
-                    >
-                      <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
-                    </IconButton>
-                    {showButtons(false)}
-                  </Typography>
-                </Grid>
-
-                <Grid size={{ xs: 4, md: 2 }}>
-                  <Typography color="secondary">{LL.DEVELOPMENT()}</Typography>
-                </Grid>
-                <Grid size={{ xs: 8, md: 10 }}>
-                  <Typography>
-                    {latestDevVersion?.version}
-                    <IconButton
-                      onClick={() => setShowVersionInfo(2)}
-                      aria-label={LL.FIRMWARE_VERSION_INFO()}
-                    >
-                      <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
-                    </IconButton>
-                    {showButtons(true)}
-                  </Typography>
-                </Grid>
-              </Grid>
-            </>
-          ) : (
-            <Typography sx={{ mt: 2 }} color="warning">
-              <WarningIcon color="warning" sx={{ verticalAlign: 'middle', mr: 2 }} />
-              {LL.INTERNET_CONNECTION_REQUIRED()}
-            </Typography>
-          )}
-          {me.admin && (
-            <>
-              <VersionInfoDialog
-                showVersionInfo={showVersionInfo}
-                latestVersion={latestVersion}
-                latestDevVersion={latestDevVersion}
-                partitionVersion={partitionVersion}
-                locale={locale}
-                partition={partition}
-                currentPartition={data?.partition ?? ''}
-                size={firmwareSize}
-                LL={LL}
-                onClose={handleVersionInfoClose}
-              />
-              <InstallDialog
-                openInstallDialog={openInstallDialog}
-                fetchDevVersion={fetchDevVersion}
-                latestVersion={latestVersion}
-                latestDevVersion={latestDevVersion}
-                upgradeImportantMessageType={upgradeImportantMessageType}
-                downloadOnly={downloadOnly}
-                platform={platform}
-                LL={LL}
-                onClose={closeInstallDialog}
-                onInstall={installFirmwareURL}
-              />
-              <InstallPartitionDialog
-                openInstallPartitionDialog={openInstallPartitionDialog}
-                version={partitionVersion?.version || ''}
-                partition={partition}
-                LL={LL}
-                onClose={closeInstallPartitionDialog}
-                onInstall={installPartitionFirmware}
-              />
-              <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
-                {LL.UPLOAD()}
               </Typography>
-              <SingleUpload doRestart={doRestart} />
+            </Typography>
-            </>
+          </Grid>
-          )}
+        </Grid>
-        </Box>
-      </>
-    );
-  }, [
-    data,
-    error,
-    loadData,
-    LL,
-    platform,
-    internetLive,
-    latestVersion,
-    latestDevVersion,
-    showVersionInfo,
-    locale,
-    openInstallDialog,
-    fetchDevVersion,
-    downloadOnly,
-    me.admin,
-    showButtons,
-    handleVersionInfoClose,
-    closeInstallDialog,
-    installFirmwareURL,
-    doRestart,
-    otherPartitions,
-    setPartitionVersionInfo,
-    showPartitionDialog,
-    partitionVersion,
-    partition,
-    firmwareSize,
-    closeInstallPartitionDialog,
-    installPartitionFirmware
-  ]);
 
-  return restarting ? <SystemMonitor /> : <SectionContent>{content}</SectionContent>;
+        {internetLive ? (
+          <>
+            <Typography sx={{ mt: 4, mb: 1 }} variant="h6" color="primary">
+              {LL.AVAILABLE_VERSION()}
+            </Typography>
+
+            <Grid
+              container
+              direction="row"
+              rowSpacing={1}
+              sx={{
+                justifyContent: 'flex-start',
+                alignItems: 'baseline'
+              }}
+            >
+              {otherPartitions.length > 0 && data.developer_mode && (
+                <>
+                  <Grid size={{ xs: 4, md: 2 }}>
+                    <Typography color="secondary">{LL.STORED_VERSIONS()}</Typography>
+                  </Grid>
+                  <Grid size={{ xs: 8, md: 10 }}>
+                    {otherPartitions.map((partition) => (
+                      <Typography key={partition.partition} sx={{ mb: 1 }}>
+                        {partition.version}
+                        <IconButton
+                          onClick={() =>
+                            setPartitionVersionInfo(partition.partition)
+                          }
+                          aria-label={LL.FIRMWARE_VERSION_INFO()}
+                        >
+                          <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
+                        </IconButton>
+                        <Button
+                          sx={{ ml: 0 }}
+                          variant="outlined"
+                          size="small"
+                          onClick={() =>
+                            showPartitionDialog(
+                              partition.version,
+                              partition.partition,
+                              partition.install_date ?? ''
+                            )
+                          }
+                        >
+                          {LL.INSTALL()}
+                        </Button>
+                      </Typography>
+                    ))}
+                  </Grid>
+                </>
+              )}
+              <Grid size={{ xs: 4, md: 2 }}>
+                <Typography color="secondary">{LL.STABLE()}</Typography>
+              </Grid>
+              <Grid size={{ xs: 8, md: 10 }}>
+                <Typography>
+                  {latestVersion?.version}
+                  <IconButton
+                    onClick={() => setShowVersionInfo(1)}
+                    aria-label={LL.FIRMWARE_VERSION_INFO()}
+                  >
+                    <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
+                  </IconButton>
+                  {showButtons(false)}
+                </Typography>
+              </Grid>
+
+              <Grid size={{ xs: 4, md: 2 }}>
+                <Typography color="secondary">{LL.DEVELOPMENT()}</Typography>
+              </Grid>
+              <Grid size={{ xs: 8, md: 10 }}>
+                <Typography>
+                  {latestDevVersion?.version}
+                  <IconButton
+                    onClick={() => setShowVersionInfo(2)}
+                    aria-label={LL.FIRMWARE_VERSION_INFO()}
+                  >
+                    <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
+                  </IconButton>
+                  {showButtons(true)}
+                </Typography>
+              </Grid>
+            </Grid>
+          </>
+        ) : (
+          <Typography sx={{ mt: 2 }} color="warning">
+            <WarningIcon color="warning" sx={{ verticalAlign: 'middle', mr: 2 }} />
+            {LL.INTERNET_CONNECTION_REQUIRED()}
+          </Typography>
+        )}
+        {me.admin && (
+          <>
+            <VersionInfoDialog
+              showVersionInfo={showVersionInfo}
+              latestVersion={latestVersion}
+              latestDevVersion={latestDevVersion}
+              partitionVersion={partitionVersion}
+              locale={locale}
+              partition={partition}
+              currentPartition={data?.partition ?? ''}
+              size={firmwareSize}
+              LL={LL}
+              onClose={handleVersionInfoClose}
+            />
+            <InstallDialog
+              openInstallDialog={openInstallDialog}
+              fetchDevVersion={fetchDevVersion}
+              latestVersion={latestVersion}
+              latestDevVersion={latestDevVersion}
+              upgradeImportantMessageType={upgradeImportantMessageType}
+              downloadOnly={downloadOnly}
+              platform={platform}
+              LL={LL}
+              onClose={closeInstallDialog}
+              onInstall={installFirmwareURL}
+            />
+            <InstallPartitionDialog
+              openInstallPartitionDialog={openInstallPartitionDialog}
+              version={partitionVersion?.version || ''}
+              partition={partition}
+              LL={LL}
+              onClose={closeInstallPartitionDialog}
+              onInstall={installPartitionFirmware}
+            />
+            <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
+              {LL.UPLOAD()}
+            </Typography>
+            <SingleUpload doRestart={doRestart} />
+          </>
+        )}
+      </Box>
+    </SectionContent>
+  );
 };
 
 export default memo(Version);

interface/src/components/MessageBox.tsx

@@ -1,4 +1,4 @@
-import { type FC, type PropsWithChildren, memo, useMemo } from 'react';
+import { type FC, type PropsWithChildren, memo } from 'react';
 
 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
 import ErrorIcon from '@mui/icons-material/Error';
@@ -38,18 +38,17 @@ const MessageBox: FC<PropsWithChildren<MessageBoxProps>> = ({
 }) => {
   const theme = useTheme();
 
-  const { Icon, backgroundColor } = useMemo(() => {
+  const Icon = LEVEL_ICONS[level];
-    const Icon = LEVEL_ICONS[level];
+  const palettePath = LEVEL_PALETTE_PATHS[level];
-    const palettePath = LEVEL_PALETTE_PATHS[level];
+  const [paletteKeyName, shade] = palettePath.split('.') as [
-    const [key, shade] = palettePath.split('.') as [
+    keyof typeof theme.palette,
-      keyof typeof theme.palette,
+    string
-      string
+  ];
-    ];
+  const paletteKey = theme.palette[paletteKeyName] as unknown as Record<
-    const paletteKey = theme.palette[key] as unknown as Record<string, string>;
+    string,
-    const backgroundColor = paletteKey[shade];
+    string
-
+  >;
-    return { Icon, backgroundColor };
+  const backgroundColor = paletteKey[shade];
-  }, [level, theme]);
 
   return (
     <Box

interface/src/components/inputs/LanguageSelector.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useContext, useMemo } from 'react';
+import { memo, useContext } from 'react';
 import type { ChangeEventHandler } from 'react';
 import type { CSSProperties } from 'react';
 
@@ -44,27 +44,14 @@ const LANGUAGE_OPTIONS: LanguageOption[] = [
 const LanguageSelector = () => {
   const { setLocale, locale, LL } = useContext(I18nContext);
 
-  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = useCallback(
+  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({
-    async ({ target }) => {
+    target
-      const loc = target.value as Locales;
+  }) => {
-      localStorage.setItem('lang', loc);
+    const loc = target.value as Locales;
-      await loadLocaleAsync(loc);
+    localStorage.setItem('lang', loc);
-      setLocale(loc);
+    await loadLocaleAsync(loc);
-    },
+    setLocale(loc);
-    [setLocale]
+  };
-  );
-
-  // Memoize menu items to prevent recreation on every render
-  const menuItems = useMemo(
-    () =>
-      LANGUAGE_OPTIONS.map(({ key, flag, label }) => (
-        <MenuItem key={key} value={key}>
-          <img src={flag} style={flagStyle} alt={label} />
-          &nbsp;{label}
-        </MenuItem>
-      )),
-    []
-  );
 
   return (
     <TextField
@@ -76,7 +63,12 @@ const LanguageSelector = () => {
       size="small"
       select
     >
-      {menuItems}
+      {LANGUAGE_OPTIONS.map(({ key, flag, label }) => (
+        <MenuItem key={key} value={key}>
+          <img src={flag} style={flagStyle} alt={label} />
+          &nbsp;{label}
+        </MenuItem>
+      ))}
     </TextField>
   );
 };

interface/src/components/inputs/ValidatedPasswordField.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useState } from 'react';
+import { memo, useState } from 'react';
 import type { FC } from 'react';
 
 import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -13,9 +13,9 @@ type ValidatedPasswordFieldProps = Omit<ValidatedTextFieldProps, 'type'>;
 const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({ ...props }) => {
   const [showPassword, setShowPassword] = useState<boolean>(false);
 
-  const togglePasswordVisibility = useCallback(() => {
+  const togglePasswordVisibility = () => {
     setShowPassword((prev) => !prev);
-  }, []);
+  };
 
   return (
     <ValidatedTextField

interface/src/components/layout/Layout.tsx

@@ -18,7 +18,6 @@ const LayoutComponent: FC<RequiredChildrenProps> = ({ children }) => {
   const [title, setTitle] = useState(PROJECT_NAME);
   const { pathname } = useLocation();
 
-  // Memoize drawer toggle handler to prevent unnecessary re-renders
   const handleDrawerToggle = useCallback(() => {
     setMobileOpen((prev) => !prev);
   }, []);
@@ -28,7 +27,6 @@ const LayoutComponent: FC<RequiredChildrenProps> = ({ children }) => {
     setMobileOpen(false);
   }, [pathname]);
 
-  // Memoize context value to prevent unnecessary re-renders
   const contextValue = useMemo(() => ({ title, setTitle }), [title]);
 
   return (

interface/src/components/layout/LayoutAppBar.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo } from 'react';
+import { memo } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router';
 
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
@@ -39,14 +39,11 @@ const LayoutAppBarComponent = ({ title, onToggleDrawer }: LayoutAppBarProps) =>
   const navigate = useNavigate();
   const location = useLocation();
 
-  const pathnames = useMemo(
+  const pathnames = location.pathname.split('/').filter((x) => x);
-    () => location.pathname.split('/').filter((x) => x),
-    [location.pathname]
-  );
 
-  const handleBackClick = useCallback(() => {
+  const handleBackClick = () => {
     void navigate('/' + pathnames[0]);
-  }, [navigate, pathnames]);
+  };
 
   return (
     <AppBar position="fixed" sx={appBarStyles}>

interface/src/components/layout/LayoutDrawer.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 
 import { Box, Divider, Drawer, Toolbar, Typography, styled } from '@mui/material';
 
@@ -24,22 +24,18 @@ interface LayoutDrawerProps {
 }
 
 const LayoutDrawerComponent = ({ mobileOpen, onClose }: LayoutDrawerProps) => {
-  // Memoize drawer content to prevent unnecessary re-renders
+  const drawer = (
-  const drawer = useMemo(
+    <>
-    () => (
+      <Toolbar disableGutters>
-      <>
+        <Box sx={{ display: 'flex', alignItems: 'center', p: 2 }}>
-        <Toolbar disableGutters>
+          <LayoutDrawerLogo src="/app/icon.png" alt={PROJECT_NAME} />
-          <Box sx={{ display: 'flex', alignItems: 'center', p: 2 }}>
+          <Typography variant="h6">{PROJECT_NAME}</Typography>
-            <LayoutDrawerLogo src="/app/icon.png" alt={PROJECT_NAME} />
+        </Box>
-            <Typography variant="h6">{PROJECT_NAME}</Typography>
+        <Divider absolute />
-          </Box>
+      </Toolbar>
-          <Divider absolute />
+      <Divider />
-        </Toolbar>
+      <LayoutMenu />
-        <Divider />
+    </>
-        <LayoutMenu />
-      </>
-    ),
-    []
   );
 
   return (

interface/src/components/layout/LayoutMenu.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useContext, useState } from 'react';
+import { memo, useContext, useState } from 'react';
 
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import AssessmentIcon from '@mui/icons-material/Assessment';
@@ -22,9 +22,9 @@ const LayoutMenuComponent = () => {
   const { LL } = useI18nContext();
   const [menuOpen, setMenuOpen] = useState(true);
 
-  const handleMenuToggle = useCallback(() => {
+  const handleMenuToggle = () => {
     setMenuOpen((prev) => !prev);
-  }, []);
+  };
 
   return (
     <>

interface/src/components/layout/LayoutMenuItem.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { Link, useLocation } from 'react-router';
 
 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
@@ -21,50 +21,40 @@ const LayoutMenuItemComponent = ({
 }: LayoutMenuItemProps) => {
   const { pathname } = useLocation();
 
-  const selected = useMemo(() => routeMatches(to, pathname), [to, pathname]);
+  const selected = routeMatches(to, pathname);
 
-  // Memoize dynamic styles based on selected state
+  const buttonStyles: SxProps<Theme> = {
-  const buttonStyles: SxProps<Theme> = useMemo(
+    transition: 'all 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)',
-    () => ({
+    backgroundColor: selected ? 'rgba(144, 202, 249, 0.1)' : 'transparent',
-      transition: 'all 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+    borderRadius: '8px',
-      backgroundColor: selected ? 'rgba(144, 202, 249, 0.1)' : 'transparent',
+    margin: '2px 8px',
-      borderRadius: '8px',
+    '&:hover': {
-      margin: '2px 8px',
+      backgroundColor: 'rgba(68, 82, 211, 0.39)'
-      '&:hover': {
+    },
-        backgroundColor: 'rgba(68, 82, 211, 0.39)'
+    '&::before': {
-      },
+      content: '""',
-      '&::before': {
+      position: 'absolute',
-        content: '""',
+      left: 0,
-        position: 'absolute',
+      top: 0,
-        left: 0,
+      bottom: 0,
-        top: 0,
+      width: selected ? '3px' : '0px',
-        bottom: 0,
+      backgroundColor: '#90caf9',
-        width: selected ? '3px' : '0px',
+      transition: 'width 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)'
-        backgroundColor: '#90caf9',
+    }
-        transition: 'width 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)'
+  };
-      }
-    }),
-    [selected]
-  );
 
-  const iconStyles: SxProps<Theme> = useMemo(
+  const iconStyles: SxProps<Theme> = {
-    () => ({
+    color: selected ? '#90caf9' : '#9e9e9e',
-      color: selected ? '#90caf9' : '#9e9e9e',
+    transition: 'color 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)',
-      transition: 'color 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+    transform: selected ? 'scale(1.1)' : 'scale(1)',
-      transform: selected ? 'scale(1.1)' : 'scale(1)',
+    transitionProperty: 'color, transform'
-      transitionProperty: 'color, transform'
+  };
-    }),
-    [selected]
-  );
 
-  const textStyles: SxProps<Theme> = useMemo(
+  const textStyles: SxProps<Theme> = {
-    () => ({
+    color: selected ? '#90caf9' : '#f5f5f5',
-      color: selected ? '#90caf9' : '#f5f5f5',
+    transition: 'color 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)',
-      transition: 'color 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+    transitionProperty: 'color, font-weight'
-      transitionProperty: 'color, font-weight'
+  };
-    }),
-    [selected]
-  );
 
   return (
     <ListItemButton

interface/src/components/routing/BlockNavigation.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import type { Blocker } from 'react-router';
 
 import {
@@ -15,13 +15,13 @@ import { useI18nContext } from 'i18n/i18n-react';
 const BlockNavigation = ({ blocker }: { blocker: Blocker }) => {
   const { LL } = useI18nContext();
 
-  const handleReset = useCallback(() => {
+  const handleReset = () => {
     blocker.reset?.();
-  }, [blocker]);
+  };
 
-  const handleProceed = useCallback(() => {
+  const handleProceed = () => {
     blocker.proceed?.();
-  }, [blocker]);
+  };
 
   return (
     <Dialog sx={dialogStyle} open={blocker.state === 'blocked'}>

interface/src/components/routing/RouterTabs.tsx

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

interface/src/contexts/authentication/Authentication.tsx

@@ -67,7 +67,6 @@ const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
     void refresh();
   }, [refresh]);
 
-  // cache object to prevent re-renders
   const obj = useMemo(
     () => ({
       signIn,

interface/src/utils/usePersistState.ts

@@ -1,34 +1,27 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export const usePersistState = <T>(
   initial_value: T,
   id: string
 ): [T, (new_state: T) => void] => {
-  // Set initial value - only computed once on mount
+  const [state, setState] = useState<T>(() => {
-  const _initial_value = useMemo(() => {
     try {
-      const local_storage_value_str = localStorage.getItem(`state:${id}`);
+      const stored = localStorage.getItem(`state:${id}`);
-      // If there is a value stored in localStorage, use that
+      if (stored) {
-      if (local_storage_value_str) {
+        return JSON.parse(stored) as T;
-        return JSON.parse(local_storage_value_str) as T;
       }
     } catch (error) {
-      // If parsing fails, fall back to initial_value
       console.warn(
         `Failed to parse localStorage value for key "state:${id}"`,
         error
       );
     }
-    // Otherwise use initial_value that was passed to the function
     return initial_value;
-  }, [id]); // initial_value intentionally omitted - only read on first mount
+  });
-
-  const [state, setState] = useState(_initial_value);
 
   useEffect(() => {
     try {
-      const state_str = JSON.stringify(state);
+      localStorage.setItem(`state:${id}`, JSON.stringify(state));
-      localStorage.setItem(`state:${id}`, state_str);
     } catch (error) {
       console.warn(
         `Failed to save state to localStorage for key "state:${id}"`,