diff --git a/interface/src/app/main/Dashboard.tsx b/interface/src/app/main/Dashboard.tsx
index 8198a86fd..1cb5aa9dd 100644
--- a/interface/src/app/main/Dashboard.tsx
+++ b/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,27 +200,32 @@ const Dashboard = () => {
[LL]
);
- const showName = (di: DashboardItem) => {
- if (di.id < 100) {
- // if its a device (parent node) and has entities
- if (di.nodes?.length) {
- return (
-
-
- {showType(di.n, di.t)}
- ({di.nodes?.length})
-
- );
+ const showName = useCallback(
+ (di: DashboardItem) => {
+ if (di.id < 100) {
+ // if its a device (parent node) and has entities
+ if (di.nodes?.length) {
+ return (
+
+
+ {showType(di.n, di.t)}
+ ({di.nodes?.length})
+
+ );
+ }
}
- }
- if (di.dv) {
- return {di.dv.id.slice(2)};
- }
- return null;
- };
+ if (di.dv) {
+ return {di.dv.id.slice(2)};
+ }
+ return null;
+ },
+ [showType]
+ );
- 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 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 = () => {
)}
);
-};
+});
export default Dashboard;