fix: very bad performance when scrolling paginated tables

Author: astandrik

src/components/PaginatedTable/PaginatedTable.tsx

@@ -69,9 +69,10 @@ export const PaginatedTable = <T, F>({
     const tableRef = React.useRef<HTMLDivElement>(null);
 
     const activeChunks = useScrollBasedChunks({
-        containerRef: parentRef ?? tableRef,
+        parentRef,
+        tableRef,
         totalItems: foundEntities,
-        itemHeight: rowHeight,
+        rowHeight,
         chunkSize: limit,
     });
 

src/components/PaginatedTable/TableChunk.tsx

@@ -8,6 +8,7 @@ import {ResponseError} from '../Errors/ResponseError';
 
 import {EmptyTableRow, LoadingTableRow, TableRow} from './TableRow';
 import type {Column, FetchData, GetRowClassName, SortParams} from './types';
+import {typedMemo} from './utils';
 
 const DEBOUNCE_TIMEOUT = 200;
 
@@ -29,7 +30,7 @@ interface TableChunkProps<T, F> {
 }
 
 // Memoisation prevents chunks rerenders that could cause perfomance issues on big tables
-export const TableChunk = <T, F>({
+export const TableChunk = typedMemo(function TableChunk<T, F>({
     id,
     limit,
     totalLength,
@@ -43,7 +44,7 @@ export const TableChunk = <T, F>({
     renderErrorMessage,
     onDataFetched,
     isActive,
-}: TableChunkProps<T, F>) => {
+}: TableChunkProps<T, F>) {
     const [isTimeoutActive, setIsTimeoutActive] = React.useState(true);
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
@@ -150,4 +151,4 @@ export const TableChunk = <T, F>({
             {renderContent()}
         </tbody>
     );
-};
+});

src/components/PaginatedTable/useScrollBasedChunks.ts

@@ -1,39 +1,42 @@
 import React from 'react';
 
-import {throttle} from 'lodash';
+import {isEqual, throttle} from 'lodash';
 
 import {getArray} from '../../utils';
 
 interface UseScrollBasedChunksProps {
-    containerRef: React.RefObject<HTMLElement>;
+    parentRef?: React.RefObject<HTMLElement>;
+    tableRef: React.RefObject<HTMLElement>;
     totalItems: number;
-    itemHeight: number;
+    rowHeight: number;
     chunkSize: number;
 }
 
 const THROTTLE_DELAY = 100;
 const CHUNKS_AHEAD_COUNT = 1;
 
 export const useScrollBasedChunks = ({
-    containerRef,
+    parentRef,
+    tableRef,
     totalItems,
-    itemHeight,
+    rowHeight,
     chunkSize,
 }: UseScrollBasedChunksProps): number[] => {
     const [activeChunks, setActiveChunks] = React.useState<number[]>(
         getArray(1 + CHUNKS_AHEAD_COUNT).map((index) => index),
     );
 
     const calculateActiveChunks = React.useCallback(() => {
-        const container = containerRef.current;
-        if (!container) {
+        const container = parentRef?.current;
+        const table = tableRef.current;
+        if (!container || !table) {
             return;
         }
 
-        const {scrollTop, clientHeight} = container;
-        const visibleStartIndex = Math.floor(scrollTop / itemHeight);
+        const tableScrollTop = Math.max(container.scrollTop - table.offsetTop, 0);
+        const visibleStartIndex = Math.floor(Math.max(tableScrollTop, 0) / rowHeight);
         const visibleEndIndex = Math.min(
-            Math.ceil((scrollTop + clientHeight) / itemHeight),
+            Math.ceil((tableScrollTop + container.clientHeight) / rowHeight),
             totalItems - 1,
         );
 
@@ -44,16 +47,18 @@ export const useScrollBasedChunks = ({
             (index) => startChunk + index,
         );
 
-        setActiveChunks(newActiveChunks);
-    }, [chunkSize, containerRef, itemHeight, totalItems]);
+        if (!isEqual(activeChunks, newActiveChunks)) {
+            setActiveChunks(newActiveChunks);
+        }
+    }, [parentRef, tableRef, rowHeight, totalItems, chunkSize, activeChunks]);
 
     const throttledCalculateActiveChunks = React.useMemo(
         () => throttle(calculateActiveChunks, THROTTLE_DELAY),
         [calculateActiveChunks],
     );
 
     React.useEffect(() => {
-        const container = containerRef.current;
+        const container = parentRef?.current;
         if (!container) {
             return undefined;
         }
@@ -63,7 +68,7 @@ export const useScrollBasedChunks = ({
             container.removeEventListener('scroll', throttledCalculateActiveChunks);
             throttledCalculateActiveChunks.cancel();
         };
-    }, [containerRef, throttledCalculateActiveChunks]);
+    }, [parentRef, throttledCalculateActiveChunks]);
 
     return activeChunks;
 };

src/components/PaginatedTable/utils.ts renamed to src/components/PaginatedTable/utils.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 // invoke passed function at most once per animation frame
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function rafThrottle<Fn extends (...args: any[]) => any>(fn: Fn) {
@@ -23,3 +25,5 @@ export function rafThrottle<Fn extends (...args: any[]) => any>(fn: Fn) {
 export function calculateColumnWidth(newWidth: number, minWidth = 40, maxWidth = Infinity) {
     return Math.max(minWidth, Math.min(newWidth, maxWidth));
 }
+
+export const typedMemo: <T>(Component: T) => T = React.memo;