useMemo per review

Signed-off-by: Kim Brose <[email protected]>
nordeck · Dec 10, 2024 · 2af792d · 2af792d
1 parent 1d348fd
commit 2af792d
Showing 1 changed file with 23 additions and 15 deletions.
diff --git a/packages/react-sdk/src/components/DeveloperTools/DeveloperToolsDialog.tsx b/packages/react-sdk/src/components/DeveloperTools/DeveloperToolsDialog.tsx
@@ -29,6 +29,7 @@ import {
   Typography,
 } from '@mui/material';
 import { unstable_useId as useId } from '@mui/utils';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useActiveWhiteboardInstanceStatistics } from '../../state';
 import { CommunicationChannelStatisticsView } from './CommunicationChannelStatisticsView';
@@ -47,6 +48,27 @@ export function DeveloperToolsDialog({
   const { document, communicationChannel } =
     useActiveWhiteboardInstanceStatistics();
 
+  const sessions = useMemo(
+    () =>
+      communicationChannel.sessions
+        ?.filter(
+          (s) =>
+            s.sessionId !== communicationChannel.localSessionId &&
+            s.expiresTs - Date.now() > 0,
+        )
+        .map((s) => ({
+          ...s,
+          status: Object.values(communicationChannel.peerConnections).find(
+            (p) => p.remoteSessionId === s.sessionId,
+          )?.connectionState,
+        })),
+    [
+      communicationChannel.sessions,
+      communicationChannel.localSessionId,
+      communicationChannel.peerConnections,
+    ],
+  );
+
   const dialogTitleId = useId();
   const dialogDescriptionId = useId();
 
@@ -132,21 +154,7 @@ export function DeveloperToolsDialog({
               </Typography>
             </AccordionSummary>
             <AccordionDetails>
-              <WhiteboardSessionsTable
-                sessions={communicationChannel.sessions
-                  ?.filter(
-                    (s) =>
-                      s.sessionId !== communicationChannel.localSessionId &&
-                      s.expiresTs - Date.now() > 0,
-                  )
-                  .map((s) => ({
-                    ...s,
-                    status: Object.values(
-                      communicationChannel.peerConnections,
-                    ).find((p) => p.remoteSessionId === s.sessionId)
-                      ?.connectionState,
-                  }))}
-              />
+              <WhiteboardSessionsTable sessions={sessions} />
             </AccordionDetails>
           </Accordion>
         </Box>