perf: observe columns with one ResizeObserver instance (#706)

* perf: observe columns with one ResizeObserver instance

* refactor: debounce replace with raf delay 2 frames

Author: curly210102

package.json

@@ -55,7 +55,7 @@
   "dependencies": {
     "@babel/runtime": "^7.10.1",
     "classnames": "^2.2.5",
-    "rc-resize-observer": "^1.0.0",
+    "rc-resize-observer": "^1.1.0",
     "rc-util": "^5.14.0",
     "shallowequal": "^1.1.0"
   },

src/Body/MeasureCell.tsx

@@ -7,7 +7,7 @@ export interface MeasureCellProps {
 }
 
 export default function MeasureCell({ columnKey, onColumnResize }: MeasureCellProps) {
-  const cellRef = React.useRef<HTMLTableDataCellElement>();
+  const cellRef = React.useRef<HTMLTableCellElement>();
 
   React.useEffect(() => {
     if (cellRef.current) {
@@ -16,11 +16,7 @@ export default function MeasureCell({ columnKey, onColumnResize }: MeasureCellPr
   }, []);
 
   return (
-    <ResizeObserver
-      onResize={({ offsetWidth }) => {
-        onColumnResize(columnKey, offsetWidth);
-      }}
-    >
+    <ResizeObserver data={columnKey}>
       <td ref={cellRef} style={{ padding: 0, border: 0, height: 0 }}>
         <div style={{ height: 0, overflow: 'hidden' }}>&nbsp;</div>
       </td>

src/Body/MeasureRow.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import ResizeObserver from 'rc-resize-observer';
+import MeasureCell from './MeasureCell';
+import raf from 'rc-util/lib/raf';
+
+export interface MeasureCellProps {
+  prefixCls: string;
+  onColumnResize: (key: React.Key, width: number) => void;
+  columnsKey: React.Key[];
+}
+
+export default function MeasureRow({ prefixCls, columnsKey, onColumnResize }: MeasureCellProps) {
+  // delay state update while resize continuously, e.g. window resize
+  const resizedColumnsRef = React.useRef(new Map());
+  const rafIdRef = React.useRef(null);
+
+  const delayOnColumnResize = () => {
+    if (rafIdRef.current === null) {
+      rafIdRef.current = raf(() => {
+        resizedColumnsRef.current.forEach((width, columnKey) => {
+          onColumnResize(columnKey, width);
+        });
+        resizedColumnsRef.current.clear();
+        rafIdRef.current = null;
+      }, 2);
+    }
+  };
+
+  React.useEffect(() => {
+    return () => {
+      raf.cancel(rafIdRef.current);
+    };
+  }, []);
+  return (
+    <tr
+      aria-hidden="true"
+      className={`${prefixCls}-measure-row`}
+      style={{ height: 0, fontSize: 0 }}
+    >
+      <ResizeObserver.Collection
+        onBatchResize={infoList => {
+          infoList.forEach(({ data: columnKey, size }) => {
+            resizedColumnsRef.current.set(columnKey, size.offsetWidth);
+          });
+          delayOnColumnResize();
+        }}
+      >
+        {columnsKey.map(columnKey => (
+          <MeasureCell key={columnKey} columnKey={columnKey} onColumnResize={onColumnResize} />
+        ))}
+      </ResizeObserver.Collection>
+    </tr>
+  );
+}

src/Body/index.tsx

@@ -5,10 +5,10 @@ import ExpandedRow from './ExpandedRow';
 import BodyContext from '../context/BodyContext';
 import { getColumnsKey } from '../utils/valueUtil';
 import ResizeContext from '../context/ResizeContext';
-import MeasureCell from './MeasureCell';
 import BodyRow from './BodyRow';
 import useFlattenRecords from '../hooks/useFlattenRecords';
 import HoverContext from '../context/HoverContext';
+import MeasureRow from './MeasureRow';
 
 export interface BodyProps<RecordType> {
   data: readonly RecordType[];
@@ -102,19 +102,11 @@ function Body<RecordType>({
         <WrapperComponent className={`${prefixCls}-tbody`}>
           {/* Measure body column width with additional hidden col */}
           {measureColumnWidth && (
-            <tr
-              aria-hidden="true"
-              className={`${prefixCls}-measure-row`}
-              style={{ height: 0, fontSize: 0 }}
-            >
-              {columnsKey.map(columnKey => (
-                <MeasureCell
-                  key={columnKey}
-                  columnKey={columnKey}
-                  onColumnResize={onColumnResize}
-                />
-              ))}
-            </tr>
+            <MeasureRow
+              prefixCls={prefixCls}
+              columnsKey={columnsKey}
+              onColumnResize={onColumnResize}
+            />
           )}
 
           {rows}

tests/FixedColumn-IE.spec.js

@@ -5,6 +5,7 @@ import { spyElementPrototype } from 'rc-util/lib/test/domHook';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { isStyleSupport } from 'rc-util/lib/Dom/styleChecker';
 import Table from '../src';
+import RcResizeObserver from 'rc-resize-observer';
 
 jest.mock('rc-util/lib/Dom/styleChecker', () => {
   return {
@@ -46,7 +47,16 @@ describe('Table.FixedColumn', () => {
     const wrapper = mount(<Table columns={columns} data={data} scroll={{ x: 1200 }} />);
 
     act(() => {
-      wrapper.find('table ResizeObserver').first().props().onResize({ width: 93, offsetWidth: 93 });
+      wrapper
+        .find(RcResizeObserver.Collection)
+        .first()
+        .props()
+        .onBatchResize([
+          {
+            data: wrapper.find('table ResizeObserver').first().props().data,
+            size: { width: 93, offsetWidth: 93 },
+          },
+        ]);
     });
 
     await act(async () => {

tests/FixedColumn.spec.js

@@ -4,6 +4,7 @@ import { act } from 'react-dom/test-utils';
 import { resetWarned } from 'rc-util/lib/warning';
 import { spyElementPrototype } from 'rc-util/lib/test/domHook';
 import Table from '../src';
+import RcResizeObserver from 'rc-resize-observer';
 
 describe('Table.FixedColumn', () => {
   let domSpy;
@@ -59,10 +60,15 @@ describe('Table.FixedColumn', () => {
 
           act(() => {
             wrapper
-              .find('table ResizeObserver')
+              .find(RcResizeObserver.Collection)
               .first()
               .props()
-              .onResize({ width: 93, offsetWidth: 93 });
+              .onBatchResize([
+                {
+                  data: wrapper.find('table ResizeObserver').first().props().data,
+                  size: { width: 93, offsetWidth: 93 },
+                },
+              ]);
           });
           await act(async () => {
             jest.runAllTimers();

tests/FixedHeader.spec.js

@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { spyElementPrototype } from 'rc-util/lib/test/domHook';
 import Table, { INTERNAL_COL_DEFINE } from '../src';
+import RcResizeObserver from 'rc-resize-observer';
 
 describe('Table.FixedHeader', () => {
   let domSpy;
@@ -35,9 +36,24 @@ describe('Table.FixedHeader', () => {
       />,
     );
 
-    wrapper.find('ResizeObserver').at(0).props().onResize({ width: 100, offsetWidth: 100 });
-    wrapper.find('ResizeObserver').at(1).props().onResize({ width: 200, offsetWidth: 200 });
-    wrapper.find('ResizeObserver').at(2).props().onResize({ width: 0, offsetWidth: 0 });
+    wrapper
+      .find(RcResizeObserver.Collection)
+      .first()
+      .props()
+      .onBatchResize([
+        {
+          data: wrapper.find('ResizeObserver').at(0).props().data,
+          size: { width: 100, offsetWidth: 100 },
+        },
+        {
+          data: wrapper.find('ResizeObserver').at(1).props().data,
+          size: { width: 200, offsetWidth: 200 },
+        },
+        {
+          data: wrapper.find('ResizeObserver').at(2).props().data,
+          size: { width: 0, offsetWidth: 0 },
+        },
+      ]);
 
     await act(async () => {
       jest.runAllTimers();
@@ -147,7 +163,16 @@ describe('Table.FixedHeader', () => {
       />,
     );
 
-    wrapper.find('ResizeObserver').at(0).props().onResize({ width: 93, offsetWidth: 93 });
+    wrapper
+      .find(RcResizeObserver.Collection)
+      .first()
+      .props()
+      .onBatchResize([
+        {
+          data: wrapper.find('ResizeObserver').at(0).props().data,
+          size: { width: 93, offsetWidth: 93 },
+        },
+      ]);
     await act(async () => {
       jest.runAllTimers();
       await Promise.resolve();
@@ -161,7 +186,17 @@ describe('Table.FixedHeader', () => {
     // Hide Table should not modify column width
     visible = false;
 
-    wrapper.find('ResizeObserver').at(0).props().onResize({ width: 0, offsetWidth: 0 });
+    wrapper
+      .find(RcResizeObserver.Collection)
+      .first()
+      .props()
+      .onBatchResize([
+        {
+          data: wrapper.find('ResizeObserver').at(0).props().data,
+          size: { width: 0, offsetWidth: 0 },
+        },
+      ]);
+
     act(() => {
       jest.runAllTimers();
       wrapper.update();