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,11 +76,12 @@ const Dashboard = () => {
     }
   );
 
-  const deviceValueDialogSave = async (devicevalue: DeviceValue) => {
+  const deviceValueDialogSave = useCallback(
+    async (devicevalue: DeviceValue) => {
       if (!selectedDashboardItem) {
         return;
       }
-    const id = selectedDashboardItem.parentNode.id; // this is the parent ID
+      const id = selectedDashboardItem.id; // this is the parent ID
       await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v })
         .then(() => {
           toast.success(LL.WRITE_CMD_SENT());
@@ -92,9 +93,13 @@ const Dashboard = () => {
           setDeviceValueDialogOpen(false);
           setSelectedDashboardItem(undefined);
         });
-  };
+    },
+    [selectedDashboardItem, sendDeviceValue, LL]
+  );
 
-  const dashboard_theme = useTheme({
+  const dashboard_theme = useMemo(
+    () =>
+      useTheme({
         Table: `
       --data-table-library_grid-template-columns: minmax(80px, auto) 120px 32px;
     `,
@@ -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,7 +169,8 @@ const Dashboard = () => {
       : tree.fns.onRemoveAll(); // collapse tree
   }, [parentNodes]);
 
-  const showType = (n?: string, t?: number) => {
+  const showType = useCallback(
+    (n?: string, t?: number) => {
       // if we have a name show it
       if (n) {
         return n;
@@ -183,7 +191,9 @@ const Dashboard = () => {
         }
       }
       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(
+    (di: DashboardItem) => {
       if (me.admin && di.dv?.c) {
         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(