From 6e497034ce77550b7e1b60c263e5c7b48ee4866f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Mon, 18 Sep 2023 15:26:10 +0800
Subject: [PATCH] enhance: Rm duplicated re-render of expanded row (#1022)

* test: test driven

* fix: not expanded for rerender
---
 src/Body/BodyRow.tsx     | 14 +++++---------
 tests/ExpandRow.spec.jsx | 15 +++++++++++++++
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx
index baf6f9e5f..928d3b808 100644
--- a/src/Body/BodyRow.tsx
+++ b/src/Body/BodyRow.tsx
@@ -3,9 +3,9 @@ import * as React from 'react';
 import Cell from '../Cell';
 import { responseImmutable } from '../context/TableContext';
 import devRenderTimes from '../hooks/useRenderTimes';
+import useRowInfo from '../hooks/useRowInfo';
 import type { ColumnType, CustomizeComponent, GetRowKey } from '../interface';
 import ExpandedRow from './ExpandedRow';
-import useRowInfo from '../hooks/useRowInfo';
 
 export interface BodyRowProps<RecordType> {
   record: RecordType;
@@ -116,18 +116,14 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     rowSupportExpand,
   } = rowInfo;
 
-  const [expandRended, setExpandRended] = React.useState(false);
+  // Force render expand row if expanded before
+  const expandedRef = React.useRef(false);
+  expandedRef.current ||= expanded;
 
   if (process.env.NODE_ENV !== 'production') {
     devRenderTimes(props);
   }
 
-  React.useEffect(() => {
-    if (expanded) {
-      setExpandRended(true);
-    }
-  }, [expanded]);
-
   // ======================== Base tr row ========================
   const baseRowNode = (
     <RowComponent
@@ -181,7 +177,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
 
   // ======================== Expand Row =========================
   let expandRowNode: React.ReactElement;
-  if (rowSupportExpand && (expandRended || expanded)) {
+  if (rowSupportExpand && (expandedRef.current || expanded)) {
     const expandContent = expandedRowRender(record, index, indent + 1, expanded);
     const computedExpandedRowClassName =
       expandedRowClassName && expandedRowClassName(record, index, indent);
diff --git a/tests/ExpandRow.spec.jsx b/tests/ExpandRow.spec.jsx
index 0fd701f7f..3938ea1f5 100644
--- a/tests/ExpandRow.spec.jsx
+++ b/tests/ExpandRow.spec.jsx
@@ -1,3 +1,4 @@
+import { render } from '@testing-library/react';
 import { mount } from 'enzyme';
 import { spyElementPrototype } from 'rc-util/lib/test/domHook';
 import { resetWarned } from 'rc-util/lib/warning';
@@ -636,4 +637,18 @@ describe('Table.Expand', () => {
     );
     errorSpy.mockRestore();
   });
+
+  it('should only trigger once', () => {
+    const expandedRowRender = vi.fn(() => <p>extra data</p>);
+    render(
+      createTable({
+        expandable: {
+          expandedRowRender,
+          expandedRowKeys: [0],
+        },
+      }),
+    );
+
+    expect(expandedRowRender).toHaveBeenCalledTimes(1);
+  });
 });