optimizations using caching

interface/src/app/main/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { IconContext } from 'react-icons/lib';
 import { Link } from 'react-router';
 import { toast } from 'react-toastify';
@@ -44,7 +44,7 @@ import {
 } from './types';
 import { deviceValueItemValidation } from './validators';
 
-const Dashboard = () => {
+const Dashboard = memo(() => {
   const { LL } = useI18nContext();
   const { me } = useContext(AuthenticatedContext);
 
@@ -163,9 +163,14 @@ const Dashboard = () => {
     }
   });
 
+  const nodeIds = useMemo(
+    () => data.nodes.map((item: DashboardItem) => item.id),
+    [data.nodes]
+  );
+
   useEffect(() => {
     showAll
-      ? tree.fns.onAddAll(data.nodes.map((item: DashboardItem) => item.id)) // expand tree
+      ? tree.fns.onAddAll(nodeIds) // expand tree
       : tree.fns.onRemoveAll(); // collapse tree
   }, [parentNodes]);
 
@@ -195,7 +200,8 @@ const Dashboard = () => {
     [LL]
   );
 
-  const showName = (di: DashboardItem) => {
+  const showName = useCallback(
+    (di: DashboardItem) => {
       if (di.id < 100) {
         // if its a device (parent node) and has entities
         if (di.nodes?.length) {
@@ -212,10 +218,14 @@ const Dashboard = () => {
         return <span>{di.dv.id.slice(2)}</span>;
       }
       return null;
-  };
+    },
+    [showType]
+  );
 
-  const hasMask = (id: string, mask: number) =>
+  const hasMask = useCallback(
-    (parseInt(id.slice(0, 2), 16) & mask) === mask;
+    (id: string, mask: number) => (parseInt(id.slice(0, 2), 16) & mask) === mask,
+    []
+  );
 
   const editDashboardValue = useCallback(
     (di: DashboardItem) => {
@@ -237,6 +247,11 @@ const Dashboard = () => {
     }
   };
 
+  const hasFavEntities = useMemo(
+    () => data.nodes.filter((item: DashboardItem) => item.id <= 90).length,
+    [data.nodes]
+  );
+
   const renderContent = () => {
     if (!data) {
       return (
@@ -244,10 +259,6 @@ const Dashboard = () => {
       );
     }
 
-    const hasFavEntities = data.nodes.filter(
-      (item: DashboardItem) => item.id <= 90
-    ).length;
-
     return (
       <>
         {!data.connected && (
@@ -391,6 +402,6 @@ const Dashboard = () => {
       )}
     </SectionContent>
   );
-};
+});
 
 export default Dashboard;