From f76c0d1a6d7e169fb8219a9f082843d0967c04e0 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Fri, 21 Feb 2025 17:00:58 +0100
Subject: [PATCH] refactor: improve composition performance

---
 .../cuesheet/cuesheet-table/CuesheetTable.tsx | 18 +++++------
 .../cuesheet-table-elements/EventRow.tsx      | 30 +++++++++++++++----
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
index b852781a8..a09fc8d1c 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useRef } from 'react';
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { ColumnDef, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import Color from 'color';
 import {
   isOntimeBlock,
@@ -165,7 +165,8 @@ export default function CuesheetTable(props: CuesheetTableProps) {
 
                 return (
                   <EventRow
-                    key={key}
+                    key={row.id}
+                    rowId={row.id}
                     eventId={entry.id}
                     eventIndex={eventIndex}
                     rowIndex={index}
@@ -173,15 +174,10 @@ export default function CuesheetTable(props: CuesheetTableProps) {
                     selectedRef={isSelected ? selectedRef : undefined}
                     skip={entry.skip}
                     colour={entry.colour}
-                  >
-                    {row.getVisibleCells().map((cell) => {
-                      return (
-                        <td key={cell.id} style={{ width: cell.column.getSize(), backgroundColor: rowBgColour }}>
-                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                        </td>
-                      );
-                    })}
-                  </EventRow>
+                    rowBgColour={rowBgColour}
+                    table={table}
+                    columnSizing={columnSizing}
+                  />
                 );
               }
 
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
index b6e572dc1..c876706b0 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
@@ -1,7 +1,9 @@
-import { memo, MutableRefObject, PropsWithChildren, useLayoutEffect, useRef, useState } from 'react';
+import { memo, MutableRefObject, useLayoutEffect, useRef, useState } from 'react';
 import { IconButton } from '@chakra-ui/react';
 import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';
+import { flexRender, Table } from '@tanstack/react-table';
 import Color from 'color';
+import { OntimeRundownEntry } from 'ontime-types';
 
 import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { useCuesheetOptions } from '../../cuesheet.options';
@@ -10,6 +12,7 @@ import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMen
 import style from '../CuesheetTable.module.scss';
 
 interface EventRowProps {
+  rowId: string;
   eventId: string;
   eventIndex: number;
   rowIndex: number;
@@ -17,10 +20,16 @@ interface EventRowProps {
   selectedRef?: MutableRefObject<HTMLTableRowElement | null>;
   skip?: boolean;
   colour?: string;
+  rowBgColour?: string;
+  table: Table<OntimeRundownEntry>;
+  /** hack to force re-rendering of the row when the column sizes change */
+  columnSizing: Record<string, number>;
 }
 
-function EventRow(props: PropsWithChildren<EventRowProps>) {
-  const { children, eventId, eventIndex, rowIndex, isPast, selectedRef, skip, colour } = props;
+export default memo(EventRow);
+
+function EventRow(props: EventRowProps) {
+  const { rowId, eventId, eventIndex, rowIndex, isPast, selectedRef, skip, colour, rowBgColour, table } = props;
   const { hideIndexColumn, showActionMenu } = useCuesheetOptions();
   const ownRef = useRef<HTMLTableRowElement>(null);
   const [isVisible, setIsVisible] = useState(false);
@@ -83,9 +92,18 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
           {eventIndex}
         </td>
       )}
-      {isVisible ? children : null}
+      {isVisible
+        ? table
+            .getRow(rowId)
+            ?.getVisibleCells()
+            .map((cell) => {
+              return (
+                <td key={cell.id} style={{ width: cell.column.getSize(), backgroundColor: rowBgColour }}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              );
+            })
+        : null}
     </tr>
   );
 }
-
-export default memo(EventRow);