chore: Use batch to update state

Author: zombieJ

src/Overflow.tsx

@@ -65,7 +65,6 @@ function Overflow<ItemType = any>(
   function registerSize(key: React.Key, width: number) {
     setItemWidths((origin) => {
       const clone = new Map(origin);
-      console.log('==>>>', key, width);
 
       if (!width) {
         clone.delete(key);
@@ -77,12 +76,9 @@ function Overflow<ItemType = any>(
   }
 
   function registerOverflowSize(_: React.Key, width: number) {
-    console.log('Overflow >>>', width);
     setOverflowWidth(width);
   }
 
-  console.log('BATCH >>>', containerWidth, overflowWidth, itemWidths);
-
   // ================================ Render ================================
   let overflowNode = (
     <div className={classNames(prefixCls, className)} style={style} ref={ref}>

src/hooks/useBatchState.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from 'react';
+import { beforeFrame, cancelBeforeFrame } from '../util';
 
 /**
  * State generate. Return a `setState` but it will flush all state with one render to save perf.
@@ -7,6 +8,7 @@ export function useBatchState() {
   const [, forceUpdate] = useState({});
   const statesRef = useRef<any[]>([]);
   let walkingIndex = 0;
+  let beforeFrameId: number = 0;
 
   function createState<T>(
     defaultValue: T,
@@ -25,7 +27,12 @@ export function useBatchState() {
     function setValue(val: any) {
       statesRef.current[myIndex] = typeof val === 'function' ? val(value) : val;
 
-      forceUpdate({});
+      cancelBeforeFrame(beforeFrameId);
+
+      // Flush with batch
+      beforeFrameId = beforeFrame(() => {
+        forceUpdate({});
+      });
     }
 
     return [value, setValue];

src/util.ts

@@ -12,24 +12,29 @@ export function getFullWidth(element: HTMLElement) {
 }
 
 // =================================== Frame ===================================
-let batchQueue: (() => void)[] = [];
-let batchUUID = 0;
+let uuid = 0;
 
-/** Will execute all callback before next frame but after promise */
-export function batchTask(callback: () => void) {
-  batchUUID += 1;
-  const id = batchUUID;
+const ids = new Set();
 
-  batchQueue.push(callback);
+/** Trigger before frame but after promise */
+export function beforeFrame(callback: () => void) {
+  uuid += 1;
+  const myId = uuid;
+
+  ids.add(myId);
 
   const channel = new MessageChannel();
   channel.port1.onmessage = () => {
-    if (id === batchUUID) {
-      batchQueue.forEach((fn) => {
-        fn();
-      });
-      batchQueue = [];
+    if (ids.has(myId)) {
+      ids.delete(myId);
+      callback();
     }
   };
   channel.port2.postMessage(null);
+
+  return myId;
+}
+
+export function cancelBeforeFrame(id: number) {
+  ids.delete(id);
 }