From 4326e38112ac0729eaee19430dc4ff4751b7a6cd Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Tue, 3 Jan 2023 16:53:22 -0800
Subject: [PATCH] Cache all props in ListView

---
 ts/components/ListView.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/ts/components/ListView.tsx b/ts/components/ListView.tsx
index ea849e3d9b..7f759ae2ae 100644
--- a/ts/components/ListView.tsx
+++ b/ts/components/ListView.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import classNames from 'classnames';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useCallback, useMemo } from 'react';
 import type { Index, ListRowRenderer } from 'react-virtualized';
 import { List } from 'react-virtualized';
 import { ScrollBehavior } from '../types/Util';
@@ -45,6 +45,19 @@ export function ListView({
     }
   });
 
+  const rowHeight = useCallback(
+    (index: Index) => calculateRowHeight(index.index),
+    [calculateRowHeight]
+  );
+
+  const style = useMemo(() => {
+    return {
+      // See `<Timeline>` for an explanation of this `any` cast.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      overflowY: scrollable ? ('overlay' as any) : 'hidden',
+    };
+  }, [scrollable]);
+
   return (
     <List
       className={classNames(
@@ -56,14 +69,10 @@ export function ListView({
       height={height}
       ref={listRef}
       rowCount={rowCount}
-      rowHeight={(index: Index) => calculateRowHeight(index.index)}
+      rowHeight={rowHeight}
       rowRenderer={rowRenderer}
       scrollToIndex={scrollToIndex}
-      style={{
-        // See `<Timeline>` for an explanation of this `any` cast.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        overflowY: scrollable ? ('overlay' as any) : 'hidden',
-      }}
+      style={style}
       tabIndex={-1}
     />
   );