From 5b1f64ced89eca3293598d0bf7c32da463a6ac42 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Tue, 28 Mar 2023 10:37:14 -0700
Subject: [PATCH] Improve booktable performance by 15-30%

---
 frontend/src/components/BookTable/index.tsx | 67 ++++++++++-----------
 1 file changed, 33 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/BookTable/index.tsx b/frontend/src/components/BookTable/index.tsx
index 045d31b3..fb9d7265 100644
--- a/frontend/src/components/BookTable/index.tsx
+++ b/frontend/src/components/BookTable/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Box,
@@ -68,16 +68,19 @@ const BookTable = ({
   const [paymentMethods, setPaymentMethods] = useState<string[]>([]);
 
   // all sizes in 'em'
-  const fontSize = theme.typography.fontSize;
-  const verticalHeightFrame = 3.25 + (showControls ? 3.7 : 0) + (showFooter ? 2.35 : 0);
-  const verticalHeightRow = 3.25;
-  const defaultPageSize = Math.max(
-    Math.floor(
-      ((fullscreen ? fullHeight * 0.9 : maxHeight) - verticalHeightFrame) / verticalHeightRow,
-    ),
-    1,
-  );
-  const height = defaultPageSize * verticalHeightRow + verticalHeightFrame;
+  const [fontSize, defaultPageSize, height] = useMemo(() => {
+    const fontSize = theme.typography.fontSize;
+    const verticalHeightFrame = 3.25 + (showControls ? 3.7 : 0) + (showFooter ? 2.35 : 0);
+    const verticalHeightRow = 3.25;
+    const defaultPageSize = Math.max(
+      Math.floor(
+        ((fullscreen ? fullHeight * 0.9 : maxHeight) - verticalHeightFrame) / verticalHeightRow,
+      ),
+      1,
+    );
+    const height = defaultPageSize * verticalHeightRow + verticalHeightFrame;
+    return [fontSize, defaultPageSize, height];
+  }, [theme.typography.fontSize, maxHeight, fullscreen, fullHeight, showControls, showFooter]);
 
   const [useDefaultPageSize, setUseDefaultPageSize] = useState(true);
   useEffect(() => {
@@ -624,7 +627,9 @@ const BookTable = ({
     return [columns, width * 0.875 + 0.15];
   };
 
-  const [columns, width] = filteredColumns(fullscreen ? fullWidth : maxWidth);
+  const [columns, width] = useMemo(() => {
+    return filteredColumns(fullscreen ? fullWidth : maxWidth);
+  }, [maxWidth, fullscreen, fullWidth]);
 
   const Footer = function () {
     return (
@@ -690,7 +695,7 @@ const BookTable = ({
     );
   };
 
-  const gridComponents = function () {
+  const gridComponents = useMemo(() => {
     const components: GridComponentProps = {
       LoadingOverlay: LinearProgress,
     };
@@ -706,7 +711,17 @@ const BookTable = ({
       components.Toolbar = BookControl;
     }
     return components;
-  };
+  }, [showNoResults, showFooter, showControls, fullscreen]);
+
+  const filteredOrders = useMemo(() => {
+    return showControls
+      ? filterOrders({
+          orders,
+          baseFilter: fav,
+          paymentMethods,
+        })
+      : orders;
+  }, [showControls, orders, fav, paymentMethods]);
 
   if (!fullscreen) {
     return (
@@ -722,19 +737,11 @@ const BookTable = ({
           localeText={localeText}
           rowHeight={3.714 * theme.typography.fontSize}
           headerHeight={3.25 * theme.typography.fontSize}
-          rows={
-            showControls
-              ? filterOrders({
-                  orders,
-                  baseFilter: fav,
-                  paymentMethods,
-                })
-              : orders
-          }
+          rows={filteredOrders}
           loading={book.loading}
           columns={columns}
           hideFooter={!showFooter}
-          components={gridComponents()}
+          components={gridComponents}
           componentsProps={{
             toolbar: {
               width,
@@ -762,19 +769,11 @@ const BookTable = ({
             localeText={localeText}
             rowHeight={3.714 * theme.typography.fontSize}
             headerHeight={3.25 * theme.typography.fontSize}
-            rows={
-              showControls
-                ? filterOrders({
-                    orders,
-                    baseFilter: fav,
-                    paymentMethods,
-                  })
-                : orders
-            }
+            rows={filteredOrders}
             loading={book.loading}
             columns={columns}
             hideFooter={!showFooter}
-            components={gridComponents()}
+            components={gridComponents}
             componentsProps={{
               toolbar: {
                 width,