fix: Table render twice on first mount (#34106)

* fix: Table render twice

* chore: clean up

* test: Fix test case

components/grid/hooks/useBreakpoint.tsx

@@ -1,18 +1,23 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef } from 'react';
+import useForceUpdate from '../../_util/hooks/useForceUpdate';
 import ResponsiveObserve, { ScreenMap } from '../../_util/responsiveObserve';
 
-function useBreakpoint(): ScreenMap {
-  const [screens, setScreens] = useState<ScreenMap>({});
+function useBreakpoint(refreshOnChange: boolean = true): ScreenMap {
+  const screensRef = useRef<ScreenMap>({});
+  const forceUpdate = useForceUpdate();
 
   useEffect(() => {
     const token = ResponsiveObserve.subscribe(supportScreens => {
-      setScreens(supportScreens);
+      screensRef.current = supportScreens;
+      if (refreshOnChange) {
+        forceUpdate();
+      }
     });
 
     return () => ResponsiveObserve.unsubscribe(token);
   }, []);
 
-  return screens;
+  return screensRef.current;
 }
 
 export default useBreakpoint;

components/table/Table.tsx

@@ -139,15 +139,25 @@ function InternalTable<RecordType extends object = any>(
     '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.',
   );
 
-  const screens = useBreakpoint();
+  const baseColumns = React.useMemo(
+    () => columns || convertChildrenToColumns(children),
+    [columns, children],
+  );
+  const needResponsive = React.useMemo(
+    () => baseColumns.some((col: ColumnType<RecordType>) => col.responsive),
+    [baseColumns],
+  );
+
+  const screens = useBreakpoint(needResponsive);
+
   const mergedColumns = React.useMemo(() => {
     const matched = new Set(Object.keys(screens).filter((m: Breakpoint) => screens[m]));
 
-    return (columns || convertChildrenToColumns(children)).filter(
+    return baseColumns.filter(
       (c: ColumnType<RecordType>) =>
         !c.responsive || c.responsive.some((r: Breakpoint) => matched.has(r)),
     );
-  }, [children, columns, screens]);
+  }, [baseColumns, screens]);
 
   const tableProps = omit(props, ['className', 'style', 'columns']) as TableProps<RecordType>;
 

components/table/__tests__/Table.filter.test.js

@@ -1100,7 +1100,7 @@ describe('Table.filter', () => {
   it('should support getPopupContainer', () => {
     const getPopupContainer = jest.fn(node => node.parentNode);
 
-    const wrapper = mount(
+    mount(
       createTable({
         columns: [
           {
@@ -1111,13 +1111,14 @@ describe('Table.filter', () => {
         getPopupContainer,
       }),
     );
-    expect(wrapper.render()).toMatchSnapshot();
     expect(getPopupContainer).toHaveBeenCalled();
   });
 
   it('should support getPopupContainer from ConfigProvider', () => {
-    const wrapper = mount(
-      <ConfigProvider getPopupContainer={node => node.parentNode}>
+    const getPopupContainer = jest.fn(node => node.parentNode);
+
+    mount(
+      <ConfigProvider getPopupContainer={getPopupContainer}>
         {createTable({
           columns: [
             {
@@ -1128,7 +1129,7 @@ describe('Table.filter', () => {
         })}
       </ConfigProvider>,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(getPopupContainer).toHaveBeenCalled();
   });
 
   it('pass visible prop to filterDropdown', () => {