fix: 7.x header blank when using sticky or scroll.y (#1268)

Author: linxianxi

src/Body/MeasureCell.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import ResizeObserver from 'rc-resize-observer';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 
 export interface MeasureCellProps {
   columnKey: React.Key;
@@ -9,7 +10,7 @@ export interface MeasureCellProps {
 export default function MeasureCell({ columnKey, onColumnResize }: MeasureCellProps) {
   const cellRef = React.useRef<HTMLTableCellElement>();
 
-  React.useEffect(() => {
+  useLayoutEffect(() => {
     if (cellRef.current) {
       onColumnResize(columnKey, cellRef.current.offsetWidth);
     }

src/Body/MeasureRow.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import ResizeObserver from 'rc-resize-observer';
 import MeasureCell from './MeasureCell';
+import isVisible from 'rc-util/lib/Dom/isVisible';
 
 export interface MeasureCellProps {
   prefixCls: string;
@@ -9,17 +10,22 @@ export interface MeasureCellProps {
 }
 
 export default function MeasureRow({ prefixCls, columnsKey, onColumnResize }: MeasureCellProps) {
+  const ref = React.useRef<HTMLTableRowElement>(null);
+
   return (
     <tr
       aria-hidden="true"
       className={`${prefixCls}-measure-row`}
       style={{ height: 0, fontSize: 0 }}
+      ref={ref}
     >
       <ResizeObserver.Collection
         onBatchResize={infoList => {
-          infoList.forEach(({ data: columnKey, size }) => {
-            onColumnResize(columnKey, size.offsetWidth);
-          });
+          if (isVisible(ref.current)) {
+            infoList.forEach(({ data: columnKey, size }) => {
+              onColumnResize(columnKey, size.offsetWidth);
+            });
+          }
         }}
       >
         {columnsKey.map(columnKey => (

src/Table.tsx

@@ -27,7 +27,6 @@
 import type { CompareProps } from '@rc-component/context/lib/Immutable';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
-import isVisible from 'rc-util/lib/Dom/isVisible';
 import { isStyleSupport } from 'rc-util/lib/Dom/styleChecker';
 import { getTargetScrollBarSize } from 'rc-util/lib/getScrollBarSize';
 import useEvent from 'rc-util/lib/hooks/useEvent';
@@ -48,7 +47,7 @@ import Header from './Header/Header';
 import useColumns from './hooks/useColumns';
 import useExpand from './hooks/useExpand';
 import useFixedInfo from './hooks/useFixedInfo';
-import { useLayoutState, useTimeoutLock } from './hooks/useFrame';
+import { useTimeoutLock } from './hooks/useFrame';
 import useHover from './hooks/useHover';
 import useSticky from './hooks/useSticky';
 import useStickyOffsets from './hooks/useStickyOffsets';
@@ -76,6 +75,7 @@ import Column from './sugar/Column';
 import ColumnGroup from './sugar/ColumnGroup';
 import { getColumnsKey, validateValue, validNumberValue } from './utils/valueUtil';
 import { getDOM } from 'rc-util/lib/Dom/findDOMNode';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 
 export const DEFAULT_PREFIX = 'rc-table';
 
@@ -349,7 +349,7 @@ function Table<RecordType extends DefaultRecordType>(
   const scrollSummaryRef = React.useRef<HTMLDivElement>();
   const [pingedLeft, setPingedLeft] = React.useState(false);
   const [pingedRight, setPingedRight] = React.useState(false);
-  const [colsWidths, updateColsWidths] = useLayoutState(new Map<React.Key, number>());
+  const [colsWidths, updateColsWidths] = React.useState(new Map<React.Key, number>());
 
   // Convert map to number width
   const colsKeys = getColumnsKey(flattenColumns);
@@ -403,16 +403,14 @@ function Table<RecordType extends DefaultRecordType>(
   }
 
   const onColumnResize = React.useCallback((columnKey: React.Key, width: number) => {
-    if (isVisible(fullTableRef.current)) {
-      updateColsWidths(widths => {
-        if (widths.get(columnKey) !== width) {
-          const newWidths = new Map(widths);
-          newWidths.set(columnKey, width);
-          return newWidths;
-        }
-        return widths;
-      });
-    }
+    updateColsWidths(widths => {
+      if (widths.get(columnKey) !== width) {
+        const newWidths = new Map(widths);
+        newWidths.set(columnKey, width);
+        return newWidths;
+      }
+      return widths;
+    });
   }, []);
 
   const [setScrollTarget, getScrollTarget] = useTimeoutLock(null);
@@ -524,7 +522,7 @@ function Table<RecordType extends DefaultRecordType>(
   const [scrollbarSize, setScrollbarSize] = React.useState(0);
   const [supportSticky, setSupportSticky] = React.useState(true); // Only IE not support, we mark as support first
 
-  React.useEffect(() => {
+  useLayoutEffect(() => {
     if (!tailor || !useInternalHooks) {
       if (scrollBodyRef.current instanceof Element) {
         setScrollbarSize(getTargetScrollBarSize(scrollBodyRef.current).width);