fix: Blink when values changed

Author: zombieJ

assets/index.less

@@ -1,7 +1,7 @@
 @overflow-prefix-cls: rc-overflow;
 
 .@{overflow-prefix-cls} {
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
   max-width: 100%;
 

examples/basic.tsx

@@ -47,7 +47,7 @@ function renderRest(items: ItemType[]) {
 
 const Demo = () => {
   const [responsive, setResponsive] = React.useState(true);
-  const [data, setData] = React.useState(createData(5));
+  const [data, setData] = React.useState(createData(1));
 
   return (
     <div style={{ padding: 32 }}>

examples/blink.tsx

@@ -41,6 +41,9 @@ const data = createData(5);
 const Demo = () => {
   return (
     <div style={{ padding: 32 }}>
+      <p>
+        Test for a edge case that rest can not decide the final display count
+      </p>
       <div
         style={{
           boxShadow: '0 0 1px green',

src/Overflow.tsx

@@ -48,7 +48,11 @@ function Overflow<ItemType = any>(
   const [itemWidths, setItemWidths] = createUseState(
     new Map<React.Key, number>(),
   );
+
+  const [prevRestWidth, setPrevRestWidth] = createUseState(0);
   const [restWidth, setRestWidth] = createUseState(0);
+  // Always use the max width to avoid blink
+  const mergedRestWidth = Math.max(prevRestWidth, restWidth);
 
   const [displayCount, setDisplayCount] = React.useState(0);
   const [restReady, setRestReady] = React.useState(false);
@@ -123,11 +127,12 @@ function Overflow<ItemType = any>(
 
   function registerOverflowSize(_: React.Key, width: number) {
     setRestWidth(width);
+    setPrevRestWidth(restWidth);
   }
 
   // ================================ Effect ================================
   React.useLayoutEffect(() => {
-    if (containerWidth && restWidth && mergedData) {
+    if (containerWidth && mergedRestWidth && mergedData) {
       let totalWidth = 0;
 
       const len = mergedData.length;
@@ -144,7 +149,7 @@ function Overflow<ItemType = any>(
         // Find best match
         totalWidth += currentItemWidth;
 
-        if (totalWidth + restWidth > containerWidth) {
+        if (totalWidth + mergedRestWidth > containerWidth) {
           updateDisplayCount(i - 1);
           break;
         } else if (i === len - 1) {
@@ -153,7 +158,7 @@ function Overflow<ItemType = any>(
         }
       }
     }
-  }, [containerWidth, itemWidths, restWidth, getKey, mergedData]);
+  }, [containerWidth, itemWidths, mergedRestWidth, getKey, mergedData]);
 
   // ================================ Render ================================
   let overflowNode = (