chore: Init batch state

Author: zombieJ

examples/basic.tsx

@@ -8,6 +8,8 @@ interface ItemType {
   label: string;
 }
 
+const originConsole = console.log;
+
 function createData(count: number): ItemType[] {
   const data: ItemType[] = new Array(count).fill(undefined).map((_, index) => ({
     value: index,

src/Overflow.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import { getFullWidth } from './util';
 import Item from './Item';
+import { useBatchState } from './hooks/useBatchState';
 
 export interface OverflowProps<ItemType> {
   prefixCls?: string;
@@ -30,11 +31,13 @@ function Overflow<ItemType = any>(
     maxCount = 'responsive',
   } = props;
 
-  const [containerWidth, setContainerWidth] = React.useState(0);
-  const [itemWidths, setItemWidths] = React.useState(
+  const createUseState = useBatchState();
+
+  const [containerWidth, setContainerWidth] = createUseState(0);
+  const [itemWidths, setItemWidths] = createUseState(
     new Map<React.Key, number>(),
   );
-  const [overflowWidth, setOverflowWidth] = React.useState(0);
+  const [overflowWidth, setOverflowWidth] = createUseState(0);
 
   const itemPrefixCls = `${prefixCls}-item`;
 
@@ -60,23 +63,26 @@ function Overflow<ItemType = any>(
   }
 
   function registerSize(key: React.Key, width: number) {
-    const clone = new Map(itemWidths);
-    console.log('==>>>', key, width);
-
-    if (!width) {
-      clone.delete(key);
-    } else {
-      clone.set(key, width);
-    }
-
-    setItemWidths(clone);
+    setItemWidths((origin) => {
+      const clone = new Map(origin);
+      console.log('==>>>', key, width);
+
+      if (!width) {
+        clone.delete(key);
+      } else {
+        clone.set(key, width);
+      }
+      return clone;
+    });
   }
 
   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

@@ -0,0 +1,35 @@
+import { useRef, useState } from 'react';
+
+/**
+ * State generate. Return a `setState` but it will flush all state with one render to save perf.
+ */
+export function useBatchState() {
+  const [, forceUpdate] = useState({});
+  const statesRef = useRef<any[]>([]);
+  let walkingIndex = 0;
+
+  function createState<T>(
+    defaultValue: T,
+  ): [T, (value: T | ((origin: T) => T)) => void] {
+    const myIndex = walkingIndex;
+    walkingIndex += 1;
+
+    // Fill value if not exist yet
+    if (statesRef.current.length < myIndex + 1) {
+      statesRef.current[myIndex] = defaultValue;
+    }
+
+    // Return filled as `setState`
+    const value = statesRef.current[myIndex];
+
+    function setValue(val: any) {
+      statesRef.current[myIndex] = typeof val === 'function' ? val(value) : val;
+
+      forceUpdate({});
+    }
+
+    return [value, setValue];
+  }
+
+  return createState;
+}

src/util.ts

@@ -10,3 +10,26 @@ export function getFullWidth(element: HTMLElement) {
 
   return left + offsetWidth + right;
 }
+
+// =================================== Frame ===================================
+let batchQueue: (() => void)[] = [];
+let batchUUID = 0;
+
+/** Will execute all callback before next frame but after promise */
+export function batchTask(callback: () => void) {
+  batchUUID += 1;
+  const id = batchUUID;
+
+  batchQueue.push(callback);
+
+  const channel = new MessageChannel();
+  channel.port1.onmessage = () => {
+    if (id === batchUUID) {
+      batchQueue.forEach((fn) => {
+        fn();
+      });
+      batchQueue = [];
+    }
+  };
+  channel.port2.postMessage(null);
+}