cache what we can

interface/src/app/main/Devices.tsx

@@ -1,8 +1,10 @@
 import {
+  memo,
   useCallback,
   useContext,
   useEffect,
   useLayoutEffect,
+  useMemo,
   useState
 } from 'react';
 import { IconContext } from 'react-icons';
@@ -75,7 +77,7 @@ import { DeviceEntityMask, DeviceType, DeviceValueUOM_s } from './types';
 import type { Device, DeviceValue } from './types';
 import { deviceValueItemValidation } from './validators';
 
-const Devices = () => {
+const Devices = memo(() => {
   const { LL } = useI18nContext();
   const { me } = useContext(AuthenticatedContext);
 
@@ -141,7 +143,9 @@ const Devices = () => {
     return left + (right - left < 400 ? 0 : 200);
   };
 
-  const common_theme = useTheme({
+  const common_theme = useMemo(
+    () =>
+      useTheme({
         BaseRow: `
       font-size: 14px;
     `,
@@ -163,9 +167,13 @@ const Devices = () => {
         background-color: #177ac9;
       }
     `
-  });
+      }),
+    []
+  );
 
-  const device_theme = useTheme([
+  const device_theme = useMemo(
+    () =>
+      useTheme([
         common_theme,
         {
           Table: `
@@ -181,9 +189,13 @@ const Devices = () => {
           background-color: #177ac9;
       `
         }
-  ]);
+      ]),
+    [common_theme]
+  );
 
-  const data_theme = useTheme([
+  const data_theme = useMemo(
+    () =>
+      useTheme([
         common_theme,
         {
           Table: `
@@ -225,7 +237,9 @@ const Devices = () => {
       }
       `
         }
-  ]);
+      ]),
+    [common_theme]
+  );
 
   const getSortIcon = (state: State, sortKey: unknown) => {
     if (state.sortKey === sortKey && state.reverse) {
@@ -324,8 +338,10 @@ const Devices = () => {
     return sc;
   };
 
-  const hasMask = (id: string, mask: number) =>
-    (parseInt(id.slice(0, 2), 16) & mask) === mask;
+  const hasMask = useCallback(
+    (id: string, mask: number) => (parseInt(id.slice(0, 2), 16) & mask) === mask,
+    []
+  );
 
   const handleDownloadCsv = () => {
     const deviceIndex = coreData.devices.findIndex(
@@ -574,12 +590,13 @@ const Devices = () => {
       return;
     }
 
-    const showDeviceValue = (dv: DeviceValue) => {
+    const showDeviceValue = useCallback((dv: DeviceValue) => {
       setSelectedDeviceValue(dv);
       setDeviceValueDialogOpen(true);
-    };
+    }, []);
 
-    const renderNameCell = (dv: DeviceValue) => (
+    const renderNameCell = useCallback(
+      (dv: DeviceValue) => (
         <>
           {dv.id.slice(2)}&nbsp;
           {hasMask(dv.id, DeviceEntityMask.DV_FAVORITE) && (
@@ -592,17 +609,22 @@ const Devices = () => {
             <CommentsDisabledOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
           )}
         </>
+      ),
+      [hasMask]
     );
 
-    const shown_data = onlyFav
-      ? deviceData.nodes.filter(
+    const shown_data = useMemo(() => {
+      if (onlyFav) {
+        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) =>
+        );
+      }
+      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
@@ -795,6 +817,6 @@ const Devices = () => {
       )}
     </SectionContent>
   );
-};
+});
 
 export default Devices;