From 4a835b8711790efc17e6f9b94125632aebd94ef7 Mon Sep 17 00:00:00 2001
From: Asger F <asgerf@github.com>
Date: Mon, 25 Nov 2024 14:34:53 +0100
Subject: [PATCH] Factor out rendering of table body to a memoized component

---
 .../ComparePerformance.tsx                    | 39 ++++++++++++++-----
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/extensions/ql-vscode/src/view/compare-performance/ComparePerformance.tsx b/extensions/ql-vscode/src/view/compare-performance/ComparePerformance.tsx
index 0aaa7619a..1b89b26a4 100644
--- a/extensions/ql-vscode/src/view/compare-performance/ComparePerformance.tsx
+++ b/extensions/ql-vscode/src/view/compare-performance/ComparePerformance.tsx
@@ -1,5 +1,5 @@
 import type { ChangeEvent } from "react";
-import { Fragment, useMemo, useRef, useState } from "react";
+import { Fragment, memo, useMemo, useRef, useState } from "react";
 import type {
   SetPerformanceComparisonQueries,
   ToComparePerformanceViewMessage,
@@ -577,15 +577,12 @@ function ComparePerformanceWithData(props: {
           </HeaderTR>
         </thead>
       </Table>
-      {rowGroups.map((rowGroup, rowGroupIndex) => (
-        <PredicateRowGroup
-          key={rowGroupIndex}
-          renderedName={rowGroupNames[rowGroupIndex]}
-          rowGroup={rowGroup}
-          comparison={comparison}
-          metric={metric}
-        />
-      ))}
+      <PredicateTable
+        rowGroups={rowGroups}
+        rowGroupNames={rowGroupNames}
+        comparison={comparison}
+        metric={metric}
+      />
       <Table>
         <tfoot>
           <tr key="spacing">
@@ -606,6 +603,28 @@ function ComparePerformanceWithData(props: {
   );
 }
 
+interface PredicateTableProps {
+  rowGroups: RowGroup[];
+  rowGroupNames: React.ReactNode[];
+  comparison: boolean;
+  metric: Metric;
+}
+
+function PredicateTableRaw(props: PredicateTableProps) {
+  const { comparison, metric, rowGroupNames, rowGroups } = props;
+  return rowGroups.map((rowGroup, rowGroupIndex) => (
+    <PredicateRowGroup
+      key={rowGroupIndex}
+      renderedName={rowGroupNames[rowGroupIndex]}
+      rowGroup={rowGroup}
+      comparison={comparison}
+      metric={metric}
+    />
+  ));
+}
+
+const PredicateTable = memo(PredicateTableRaw);
+
 interface PredicateRowGroupProps {
   renderedName: React.ReactNode;
   rowGroup: RowGroup;