From d954d565e41b9f469eb41098e68894995aa47dc7 Mon Sep 17 00:00:00 2001
From: Zeke Zhang <958414905@qq.com>
Date: Thu, 31 Oct 2024 21:08:52 +0800
Subject: [PATCH] perf(Table): improve pagination performance

---
 .../table/hooks/useTableBlockProps.tsx        | 21 ++++++++++++-------
 .../schema-component/antd/table-v2/Table.tsx  | 19 ++++++++++-------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/core/client/src/modules/blocks/data-blocks/table/hooks/useTableBlockProps.tsx b/packages/core/client/src/modules/blocks/data-blocks/table/hooks/useTableBlockProps.tsx
index f3401c82d6..ccaf07d281 100644
--- a/packages/core/client/src/modules/blocks/data-blocks/table/hooks/useTableBlockProps.tsx
+++ b/packages/core/client/src/modules/blocks/data-blocks/table/hooks/useTableBlockProps.tsx
@@ -10,7 +10,7 @@
 import { ArrayField } from '@formily/core';
 import { useField, useFieldSchema } from '@formily/react';
 import { isEqual } from 'lodash';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useTableBlockContext } from '../../../../../block-provider/TableBlockProvider';
 import { findFilterTargets } from '../../../../../block-provider/hooks';
 import { DataBlock, useFilterBlock } from '../../../../../filter-provider/FilterProvider';
@@ -26,12 +26,20 @@ export const useTableBlockProps = () => {
 
   const ctxRef = useRef(null);
   ctxRef.current = ctx;
+  const meta = ctx?.service?.data?.meta || {};
+  const pagination = useMemo(
+    () => ({
+      pageSize: meta?.pageSize,
+      total: meta?.count,
+      current: meta?.page,
+    }),
+    [meta?.count, meta?.page, meta?.pageSize],
+  );
 
   useEffect(() => {
     if (!isLoading) {
       const serviceResponse = ctx?.service?.data;
       const data = serviceResponse?.data || [];
-      const meta = serviceResponse?.meta || {};
       const selectedRowKeys = ctx?.field?.data?.selectedRowKeys;
 
       if (!isEqual(field.value, data)) {
@@ -44,12 +52,9 @@ export const useTableBlockProps = () => {
         field.data.selectedRowKeys = selectedRowKeys;
       }
 
-      field.componentProps.pagination = field.componentProps.pagination || {};
-      field.componentProps.pagination.pageSize = meta?.pageSize;
-      field.componentProps.pagination.total = meta?.count;
-      field.componentProps.pagination.current = meta?.page;
+      field.componentProps.pagination = pagination;
     }
-  }, [field, ctx?.service?.data, isLoading, ctx?.field?.data?.selectedRowKeys]);
+  }, [field, ctx?.service?.data, isLoading, ctx?.field?.data?.selectedRowKeys, pagination]);
 
   return {
     defaultDataSource: ctx?.service?.data?.data || [],
@@ -59,7 +64,7 @@ export const useTableBlockProps = () => {
     showIndex: ctx.showIndex,
     dragSort: ctx.dragSort && ctx.dragSortBy,
     rowKey: ctx.rowKey || fieldSchema?.['x-component-props']?.rowKey || 'id',
-    pagination: fieldSchema?.['x-component-props']?.pagination === false ? false : field.componentProps.pagination,
+    pagination: fieldSchema?.['x-component-props']?.pagination === false ? false : pagination,
     onRowSelectionChange: useCallback((selectedRowKeys, selectedRowData) => {
       ctx.field.data = ctx?.field?.data || {};
       ctx.field.data.selectedRowKeys = selectedRowKeys;
diff --git a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
index d84872b3a6..463a40722d 100644
--- a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
+++ b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
@@ -308,14 +308,19 @@ const usePaginationProps = (pagination1, pagination2) => {
     },
     [t, totalCount],
   );
+
+  const showTotalResult = useMemo(() => {
+    return {
+      pageSizeOptions,
+      showTotal,
+      showSizeChanger: true,
+      ...pagination,
+    };
+  }, [pagination, showTotal]);
+
   const result = useMemo(() => {
     if (totalCount) {
-      return {
-        pageSizeOptions,
-        showTotal,
-        showSizeChanger: true,
-        ...pagination,
-      };
+      return showTotalResult;
     } else {
       return {
         pageSizeOptions,
@@ -351,7 +356,7 @@ const usePaginationProps = (pagination1, pagination2) => {
         },
       };
     }
-  }, [pagination, t, showTotal, field.value?.length]);
+  }, [pagination, t, showTotal, field.value?.length, showTotalResult]);
 
   if (pagination2 === false) {
     return false;