add useCallbacks for caching and speed

interface/src/app/main/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { IconContext } from 'react-icons/lib';
 import { Link } from 'react-router';
 import { toast } from 'react-toastify';
@@ -76,35 +76,40 @@ const Dashboard = () => {
     }
   );
 
-  const deviceValueDialogSave = async (devicevalue: DeviceValue) => {
+  const deviceValueDialogSave = useCallback(
-    if (!selectedDashboardItem) {
+    async (devicevalue: DeviceValue) => {
-      return;
+      if (!selectedDashboardItem) {
-    }
+        return;
-    const id = selectedDashboardItem.parentNode.id; // this is the parent ID
+      }
-    await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v })
+      const id = selectedDashboardItem.id; // this is the parent ID
-      .then(() => {
+      await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v })
-        toast.success(LL.WRITE_CMD_SENT());
+        .then(() => {
-      })
+          toast.success(LL.WRITE_CMD_SENT());
-      .catch((error: Error) => {
+        })
-        toast.error(error.message);
+        .catch((error: Error) => {
-      })
+          toast.error(error.message);
-      .finally(() => {
+        })
-        setDeviceValueDialogOpen(false);
+        .finally(() => {
-        setSelectedDashboardItem(undefined);
+          setDeviceValueDialogOpen(false);
-      });
+          setSelectedDashboardItem(undefined);
-  };
+        });
+    },
+    [selectedDashboardItem, sendDeviceValue, LL]
+  );
 
-  const dashboard_theme = useTheme({
+  const dashboard_theme = useMemo(
-    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 {
@@ -114,7 +119,7 @@ const Dashboard = () => {
         background-color: #177ac9;
       },
     `,
-    BaseCell: `
+        BaseCell: `
       &:nth-of-type(2) {
         text-align: right;
       }
@@ -122,12 +127,14 @@ const Dashboard = () => {
         text-align: right;
       }
     `
-  });
+      }),
+    []
+  );
 
   const tree = useTree(
     { nodes: data.nodes },
     {
-      onChange: undefined // not used but needed
+      onChange: () => {} // not used but needed
     },
     {
       treeIcon: {
@@ -162,28 +169,31 @@ const Dashboard = () => {
       : tree.fns.onRemoveAll(); // collapse tree
   }, [parentNodes]);
 
-  const showType = (n?: string, t?: number) => {
+  const showType = useCallback(
-    // if we have a name show it
+    (n?: string, t?: number) => {
-    if (n) {
+      // if we have a name show it
-      return n;
+      if (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) {
-    return '';
+        // 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;
+        }
+      }
+      return '';
+    },
+    [LL]
+  );
 
   const showName = (di: DashboardItem) => {
     if (di.id < 100) {
@@ -201,20 +211,24 @@ const Dashboard = () => {
     if (di.dv) {
       return <span>{di.dv.id.slice(2)}</span>;
     }
+    return null;
   };
 
   const hasMask = (id: string, mask: number) =>
     (parseInt(id.slice(0, 2), 16) & mask) === mask;
 
-  const editDashboardValue = (di: DashboardItem) => {
+  const editDashboardValue = useCallback(
-    if (me.admin && di.dv?.c) {
+    (di: DashboardItem) => {
-      setSelectedDashboardItem(di);
+      if (me.admin && di.dv?.c) {
-      setDeviceValueDialogOpen(true);
+        setSelectedDashboardItem(di);
-    }
+        setDeviceValueDialogOpen(true);
-  };
+      }
+    },
+    [me.admin]
+  );
 
   const handleShowAll = (
-    event: React.MouseEvent<HTMLElement>,
+    _event: React.MouseEvent<HTMLElement>,
     toggle: boolean | null
   ) => {
     if (toggle !== null) {
@@ -225,7 +239,9 @@ const Dashboard = () => {
 
   const renderContent = () => {
     if (!data) {
-      return <FormLoader onRetry={fetchDashboard} errorMessage={error?.message} />;
+      return (
+        <FormLoader onRetry={fetchDashboard} errorMessage={error?.message || ''} />
+      );
     }
 
     const hasFavEntities = data.nodes.filter(