chore: Add more memo to optimize scroll render perf (#429)

* scroll erf

* memo everything

* update deps

* comment

Author: zombieJ

examples/scrollX.tsx

@@ -3,7 +3,12 @@ import Table from '../src';
 import '../assets/index.less';
 
 const columns = [
-  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+  {
+    title: 'title1',
+    dataIndex: 'a',
+    key: 'a',
+    width: 100,
+  },
   { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
   { title: 'title3', dataIndex: 'c', key: 'c', width: 100 },
   { title: 'title4', dataIndex: 'b', key: 'd', width: 100 },
@@ -27,7 +32,7 @@ const data = [
 const Demo = () => (
   <div>
     <h2>Scroll X</h2>
-    <Table style={{ width: 800 }} scroll={{ x: true }} columns={columns} data={data} />
+    <Table style={{ width: 800 }} scroll={{ x: 2000 }} columns={columns} data={data} />
   </div>
 );
 

package.json

@@ -57,7 +57,7 @@
     "prop-types": "^15.5.8",
     "raf": "^3.4.1",
     "rc-resize-observer": "^0.1.2",
-    "rc-util": "^4.19.0",
+    "rc-util": "^4.20.1",
     "react-lifecycles-compat": "^3.0.2",
     "shallowequal": "^1.1.0"
   },

src/Table.tsx

@@ -74,6 +74,18 @@ const EMPTY_SCROLL_TARGET = {};
 
 export const INTERNAL_HOOKS = 'rc-table-internal-hook';
 
+interface MemoTableContentProps {
+  children: React.ReactNode;
+  pingLeft: boolean;
+  pingRight: boolean;
+}
+const MemoTableContent = React.memo<MemoTableContentProps>(
+  ({ children }) => children as React.ReactElement,
+  // No additional render when pinged status change.
+  // This is not a bug.
+  (prev, next) => prev.pingLeft !== next.pingLeft || prev.pingRight !== next.pingRight,
+);
+
 export interface TableProps<RecordType = unknown> extends LegacyExpandableProps<RecordType> {
   prefixCls?: string;
   className?: string;
@@ -326,10 +338,13 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     internalHooks === INTERNAL_HOOKS ? transformColumns : null,
   );
 
-  const columnContext = {
-    columns,
-    flattenColumns,
-  };
+  const columnContext = React.useMemo(
+    () => ({
+      columns,
+      flattenColumns,
+    }),
+    [columns, flattenColumns],
+  );
 
   // ====================== Scroll ======================
   const fullTableRef = React.useRef<HTMLDivElement>();
@@ -371,13 +386,13 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     };
   }
 
-  function onColumnResize(columnKey: React.Key, width: number) {
+  const onColumnResize = React.useCallback((columnKey: React.Key, width: number) => {
     updateColsWidths(widths => {
       const newWidths = new Map(widths);
       newWidths.set(columnKey, width);
       return newWidths;
     });
-  }
+  }, []);
 
   const [setScrollTarget, getScrollTarget] = useTimeoutLock(null);
 
@@ -612,44 +627,69 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
       ref={fullTableRef}
       {...ariaProps}
     >
-      {title && <Panel className={`${prefixCls}-title`}>{title(mergedData)}</Panel>}
-      <div className={`${prefixCls}-container`}>{groupTableNode}</div>
-      {footer && <Panel className={`${prefixCls}-footer`}>{footer(mergedData)}</Panel>}
+      <MemoTableContent pingLeft={pingedLeft} pingRight={pingedRight}>
+        {title && <Panel className={`${prefixCls}-title`}>{title(mergedData)}</Panel>}
+        <div className={`${prefixCls}-container`}>{groupTableNode}</div>
+        {footer && <Panel className={`${prefixCls}-footer`}>{footer(mergedData)}</Panel>}
+      </MemoTableContent>
     </div>
   );
 
   if (fixColumn) {
     fullTable = <ResizeObserver onResize={onFullTableResize}>{fullTable}</ResizeObserver>;
   }
 
+  const TableContextValue = React.useMemo(
+    () => ({
+      prefixCls,
+      getComponent,
+      scrollbarSize,
+      direction,
+    }),
+    [prefixCls, getComponent, scrollbarSize, direction],
+  );
+
+  const BodyContextValue = React.useMemo(
+    () => ({
+      ...columnContext,
+      tableLayout: mergedTableLayout,
+      rowClassName,
+      expandedRowClassName,
+      componentWidth,
+      fixHeader,
+      fixColumn,
+      expandIcon: mergedExpandIcon,
+      expandableType,
+      expandRowByClick,
+      expandedRowRender,
+      onTriggerExpand,
+      expandIconColumnIndex,
+      indentSize,
+    }),
+    [
+      columnContext,
+      mergedTableLayout,
+      rowClassName,
+      expandedRowClassName,
+      componentWidth,
+      fixHeader,
+      fixColumn,
+      mergedExpandIcon,
+      expandableType,
+      expandRowByClick,
+      expandedRowRender,
+      onTriggerExpand,
+      expandIconColumnIndex,
+      indentSize,
+    ],
+  );
+
+  const ResizeContextValue = React.useMemo(() => ({ onColumnResize }), [onColumnResize]);
+
   return (
-    <TableContext.Provider
-      value={{
-        prefixCls,
-        getComponent,
-        scrollbarSize,
-        direction,
-      }}
-    >
-      <BodyContext.Provider
-        value={{
-          ...columnContext,
-          tableLayout: mergedTableLayout,
-          rowClassName,
-          expandedRowClassName,
-          componentWidth,
-          fixHeader,
-          fixColumn,
-          expandIcon: mergedExpandIcon,
-          expandableType,
-          expandRowByClick,
-          expandedRowRender,
-          onTriggerExpand,
-          expandIconColumnIndex,
-          indentSize,
-        }}
-      >
-        <ResizeContext.Provider value={{ onColumnResize }}>{fullTable}</ResizeContext.Provider>
+    <TableContext.Provider value={TableContextValue}>
+      <BodyContext.Provider value={BodyContextValue}>
+        <ResizeContext.Provider value={ResizeContextValue}>{fullTable}</ResizeContext.Provider>
       </BodyContext.Provider>
     </TableContext.Provider>
   );