refactor: Use channel to optimize render (#32)

* chore: init effect state

* refactor: useLayoutEffect for refresh

* chore: tmp of key cache

* refactor: merge effect at once

* chore: clean up

* chore: support if channel not support

Author: zombieJ

src/Overflow.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import Item from './Item';
-import { useBatchFrameState } from './hooks/useBatchFrameState';
+import useEffectState, { useBatcher } from './hooks/useEffectState';
 import RawItem from './RawItem';
 
 export const OverflowContext = React.createContext<{
@@ -89,24 +89,37 @@ function Overflow<ItemType = any>(
     ...restProps
   } = props;
 
-  const createUseState = useBatchFrameState();
-
   const fullySSR = ssr === 'full';
 
-  const [containerWidth, setContainerWidth] = createUseState<number>(null);
+  const notifyEffectUpdate = useBatcher();
+
+  const [containerWidth, setContainerWidth] = useEffectState<number>(
+    notifyEffectUpdate,
+    null,
+  );
   const mergedContainerWidth = containerWidth || 0;
 
-  const [itemWidths, setItemWidths] = createUseState(
+  const [itemWidths, setItemWidths] = useEffectState(
+    notifyEffectUpdate,
     new Map<React.Key, number>(),
   );
 
-  const [prevRestWidth, setPrevRestWidth] = createUseState(0);
-  const [restWidth, setRestWidth] = createUseState(0);
+  const [prevRestWidth, setPrevRestWidth] = useEffectState<number>(
+    notifyEffectUpdate,
+    0,
+  );
+  const [restWidth, setRestWidth] = useEffectState<number>(
+    notifyEffectUpdate,
+    0,
+  );
 
-  const [suffixWidth, setSuffixWidth] = createUseState(0);
+  const [suffixWidth, setSuffixWidth] = useEffectState<number>(
+    notifyEffectUpdate,
+    0,
+  );
   const [suffixFixedStart, setSuffixFixedStart] = useState<number>(null);
 
-  const [displayCount, setDisplayCount] = useState(null);
+  const [displayCount, setDisplayCount] = useState<number>(null);
   const mergedDisplayCount = React.useMemo(() => {
     if (displayCount === null && fullySSR) {
       return Number.MAX_SAFE_INTEGER;

src/hooks/channelUpdate.ts

@@ -0,0 +1,11 @@
+import raf from 'rc-util/lib/raf';
+
+export default function channelUpdate(callback: VoidFunction) {
+  if (typeof MessageChannel === 'undefined') {
+    raf(callback);
+  } else {
+    const channel = new MessageChannel();
+    channel.port1.onmessage = () => callback();
+    channel.port2.postMessage(undefined);
+  }
+}

src/hooks/useBatchFrameState.tsx

@@ -0,0 +1,58 @@
+import useEvent from 'rc-util/lib/hooks/useEvent';
+import * as React from 'react';
+import { unstable_batchedUpdates } from 'react-dom';
+import channelUpdate from './channelUpdate';
+
+type Updater<T> = T | ((origin: T) => T);
+
+type UpdateCallbackFunc = VoidFunction;
+
+type NotifyEffectUpdate = (callback: UpdateCallbackFunc) => void;
+
+/**
+ * Batcher for record any `useEffectState` need update.
+ */
+export function useBatcher() {
+  // Updater Trigger
+  const updateFuncRef = React.useRef<UpdateCallbackFunc[]>(null);
+
+  // Notify update
+  const notifyEffectUpdate: NotifyEffectUpdate = callback => {
+    if (!updateFuncRef.current) {
+      updateFuncRef.current = [];
+
+      channelUpdate(() => {
+        unstable_batchedUpdates(() => {
+          updateFuncRef.current.forEach(fn => {
+            fn();
+          });
+          updateFuncRef.current = null;
+        });
+      });
+    }
+
+    updateFuncRef.current.push(callback);
+  };
+
+  return notifyEffectUpdate;
+}
+
+/**
+ * Trigger state update by `useLayoutEffect` to save perf.
+ */
+export default function useEffectState<T extends string | number | object>(
+  notifyEffectUpdate: NotifyEffectUpdate,
+  defaultValue?: T,
+): [T, (value: Updater<T>) => void] {
+  // Value
+  const [stateValue, setStateValue] = React.useState(defaultValue);
+
+  // Set State
+  const setEffectVal = useEvent((nextValue: Updater<T>) => {
+    notifyEffectUpdate(() => {
+      setStateValue(nextValue);
+    });
+  });
+
+  return [stateValue, setEffectVal];
+}

src/hooks/useEffectState.tsx

@@ -1,5 +1,6 @@
-import Overflow, { OverflowProps } from './Overflow';
+import Overflow from './Overflow';
+import type { OverflowProps } from './Overflow';
 
-export { OverflowProps };
+export type { OverflowProps };
 
 export default Overflow;