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;