fix: Hover perf

docs/demo/hover-perf.md

@@ -0,0 +1,3 @@
+## hover-perf
+
+<code src="../examples/hover-perf.tsx">

src/Cell/index.tsx

@@ -5,9 +5,7 @@ import { supportRef } from 'rc-util/lib/ref';
 import type {
   DataIndex,
   ColumnType,
-  RenderedCell,
   CustomizeComponent,
-  CellType,
   DefaultRecordType,
   AlignType,
   CellEllipsisType,
@@ -17,7 +15,6 @@ import StickyContext from '../context/StickyContext';
 import HoverContext from '../context/HoverContext';
 import type { HoverContextProps } from '../context/HoverContext';
 import warning from 'rc-util/lib/warning';
-import PerfContext from '../context/PerfContext';
 import { useContextSelector } from '../ContextSelector';
 
 /** Check if cell is in hover range */
@@ -26,9 +23,7 @@ function inHoverRange(cellStartRow: number, cellRowSpan: number, startRow: numbe
   return cellStartRow <= endRow && cellEndRow >= startRow;
 }
 
-function isRenderCell<RecordType>(
-  data: React.ReactNode | RenderedCell<RecordType>,
-): data is RenderedCell<RecordType> {
+function isRenderCell(data: any) {
   return data && typeof data === 'object' && !Array.isArray(data) && !React.isValidElement(data);
 }
 
@@ -139,53 +134,35 @@ function Cell<RecordType extends DefaultRecordType>(
 ): React.ReactElement {
   const cellPrefixCls = `${prefixCls}-cell`;
 
-  const perfRecord = React.useContext(PerfContext);
   const supportSticky = React.useContext(StickyContext);
 
   // ==================== Child Node ====================
-  const [childNode, legacyCellProps] = React.useMemo<
-    [React.ReactNode, CellType<RecordType>] | [React.ReactNode]
-  >(() => {
+  const childNode = React.useMemo<React.ReactNode>(() => {
     if (validateValue(children)) {
-      return [children];
+      return children;
     }
 
-    const value = getPathValue<Record<string, unknown> | React.ReactNode, RecordType>(
-      record,
-      dataIndex,
-    );
+    const value = getPathValue<React.ReactNode, RecordType>(record, dataIndex);
 
     // Customize render node
-    let returnChildNode = value;
-    let returnCellProps: CellType<RecordType> | undefined = undefined;
-
     if (render) {
-      const renderData = render(value, record, renderIndex);
-
-      if (isRenderCell(renderData)) {
-        if (process.env.NODE_ENV !== 'production') {
-          warning(
-            false,
-            '`columns.render` return cell props is deprecated with perf issue, please use `onCell` instead.',
-          );
-        }
-        returnChildNode = renderData.children;
-        returnCellProps = renderData.props;
-        perfRecord.renderWithProps = true;
-      } else {
-        returnChildNode = renderData;
+      const renderNode = render(value, record, renderIndex);
+      if (process.env.NODE_ENV !== 'production' && isRenderCell(renderNode)) {
+        warning(
+          false,
+          '`column.render` do not support cell props any more, please use `onCell` instead.',
+        );
       }
+      return renderNode;
     }
 
-    return [returnChildNode, returnCellProps];
+    return value;
   }, [
     /* eslint-disable react-hooks/exhaustive-deps */
     // Always re-render if `renderWithProps`
-    perfRecord.renderWithProps ? Math.random() : 0,
     /* eslint-enable */
     children,
     dataIndex,
-    perfRecord,
     record,
     render,
     renderIndex,
@@ -206,15 +183,8 @@ function Cell<RecordType extends DefaultRecordType>(
     mergedChildNode = <span className={`${cellPrefixCls}-content`}>{mergedChildNode}</span>;
   }
 
-  const {
-    colSpan: cellColSpan,
-    rowSpan: cellRowSpan,
-    style: cellStyle,
-    className: cellClassName,
-    ...restCellProps
-  } = legacyCellProps || {};
-  const mergedColSpan = (cellColSpan !== undefined ? cellColSpan : colSpan) ?? 1;
-  const mergedRowSpan = (cellRowSpan !== undefined ? cellRowSpan : rowSpan) ?? 1;
+  const mergedColSpan = colSpan ?? 1;
+  const mergedRowSpan = rowSpan ?? 1;
 
   if (mergedColSpan === 0 || mergedRowSpan === 0) {
     return null;
@@ -269,7 +239,6 @@ function Cell<RecordType extends DefaultRecordType>(
     ref: React.Ref<any>;
   } = {
     title,
-    ...restCellProps,
     ...additionalProps,
     colSpan: mergedColSpan !== 1 ? mergedColSpan : null,
     rowSpan: mergedRowSpan !== 1 ? mergedRowSpan : null,
@@ -286,12 +255,11 @@ function Cell<RecordType extends DefaultRecordType>(
         [`${cellPrefixCls}-ellipsis`]: ellipsis,
         [`${cellPrefixCls}-with-append`]: appendNode,
         [`${cellPrefixCls}-fix-sticky`]: (isFixLeft || isFixRight) && isSticky && supportSticky,
-        [`${cellPrefixCls}-row-hover`]: !legacyCellProps && hovering,
+        [`${cellPrefixCls}-row-hover`]: hovering,
       },
       additionalProps.className,
-      cellClassName,
     ),
-    style: { ...additionalProps.style, ...alignStyle, ...fixedStyle, ...cellStyle },
+    style: { ...additionalProps.style, ...alignStyle, ...fixedStyle },
     onMouseEnter,
     onMouseLeave,
     ref: isRefComponent(Component) ? ref : null,

src/Table.tsx

@@ -78,6 +78,7 @@ import Summary from './Footer/Summary';
 import StickyContext from './context/StickyContext';
 import ExpandedRowContext from './context/ExpandedRowContext';
 import { EXPAND_COLUMN } from './constant';
+import RenderContext from './context/RenderContext';
 
 // Used for conditions cache
 const EMPTY_DATA = [];
@@ -171,7 +172,7 @@ export interface TableProps<RecordType = unknown>
   sticky?: boolean | TableSticky;
 }
 
-function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordType>) {
+function InternalTable<RecordType extends DefaultRecordType>(props: TableProps<RecordType>) {
   const {
     prefixCls,
     className,
@@ -863,6 +864,15 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
   );
 }
 
+function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordType>) {
+  // Tell cell that update is from parent
+  return (
+    <RenderContext.Provider value={Math.random()}>
+      <InternalTable {...props} />
+    </RenderContext.Provider>
+  );
+}
+
 Table.EXPAND_COLUMN = EXPAND_COLUMN;
 
 Table.Column = Column;

src/context/RenderContext.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const RenderContext = React.createContext<number>(null);
+
+export default RenderContext;

src/interface.ts

@@ -48,11 +48,6 @@ export interface CellType<RecordType> {
   colEnd?: number;
 }
 
-export interface RenderedCell<RecordType> {
-  props?: CellType<RecordType>;
-  children?: React.ReactNode;
-}
-
 export type DataIndex = string | number | readonly (string | number)[];
 
 export type CellEllipsisType = { showTitle?: boolean } | boolean;
@@ -76,11 +71,7 @@ export type AlignType = 'left' | 'center' | 'right';
 export interface ColumnType<RecordType> extends ColumnSharedType<RecordType> {
   colSpan?: number;
   dataIndex?: DataIndex;
-  render?: (
-    value: any,
-    record: RecordType,
-    index: number,
-  ) => React.ReactNode | RenderedCell<RecordType>;
+  render?: (value: any, record: RecordType, index: number) => React.ReactNode;
   shouldCellUpdate?: (record: RecordType, prevRecord: RecordType) => boolean;
   rowSpan?: number;
   width?: number | string;