refactor: Re-design onChange logic to support function updator

src/hooks/useEvent.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export default function useEvent<T extends Function>(callback: T): T {
+  const fnRef = React.useRef<any>();
+  fnRef.current = callback;
+
+  return React.useCallback<T>(
+    ((...args: any) => fnRef.current?.(...args)) as any,
+    [],
+  );
+}

src/hooks/useMergedState.ts

@@ -1,6 +1,13 @@
 import * as React from 'react';
+import useEvent from './useEvent';
+import useLayoutEffect from './useLayoutEffect';
 import useState from './useState';
 
+type Updater<T> = (
+  updater: T | ((origin: T) => T),
+  ignoreDestroy?: boolean,
+) => void;
+
 /**
  * Similar to `useState` but will use props value if provided.
  * Note that internal use rc-util `useState` hook.
@@ -13,7 +20,7 @@ export default function useMergedState<T, R = T>(
     onChange?: (value: T, prevValue: T) => void;
     postState?: (value: T) => T;
   },
-): [R, (value: T, ignoreDestroy?: boolean) => void] {
+): [R, Updater<T>] {
   const { defaultValue, value, onChange, postState } = option || {};
   const [innerValue, setInnerValue] = useState<T>(() => {
     if (value !== undefined) {
@@ -29,24 +36,29 @@ export default function useMergedState<T, R = T>(
       : defaultStateValue;
   });
 
-  let mergedValue = value !== undefined ? value : innerValue;
-  if (postState) {
-    mergedValue = postState(mergedValue);
-  }
+  const mergedValue = value !== undefined ? value : innerValue;
+  const postMergedValue = postState ? postState(mergedValue) : mergedValue;
 
   // setState
-  const onChangeRef = React.useRef(onChange);
-  onChangeRef.current = onChange;
-
-  const triggerChange = React.useCallback(
-    (newValue: T, ignoreDestroy?: boolean) => {
-      setInnerValue(newValue, ignoreDestroy);
-      if (mergedValue !== newValue && onChangeRef.current) {
-        onChangeRef.current(newValue, mergedValue);
-      }
-    },
-    [mergedValue, onChangeRef],
-  );
+  const onChangeFn = useEvent(onChange);
+
+  const [changePrevValue, setChangePrevValue] = React.useState<T>();
+
+  const triggerChange: Updater<T> = useEvent(updater => {
+    setChangePrevValue(mergedValue);
+    setInnerValue(prev => {
+      const nextValue =
+        typeof updater === 'function' ? (updater as any)(prev) : updater;
+      return nextValue;
+    });
+  });
+
+  // Effect to trigger onChange
+  useLayoutEffect(() => {
+    if (changePrevValue !== undefined && changePrevValue !== innerValue) {
+      onChangeFn(innerValue, changePrevValue);
+    }
+  }, [changePrevValue, innerValue, onChangeFn]);
 
   // Effect of reset value to `undefined`
   const prevValueRef = React.useRef(value);
@@ -58,5 +70,5 @@ export default function useMergedState<T, R = T>(
     prevValueRef.current = value;
   }, [value]);
 
-  return [mergedValue as unknown as R, triggerChange];
+  return [postMergedValue as unknown as R, triggerChange];
 }

tests/hooks.test.js

@@ -124,6 +124,50 @@ describe('hooks', () => {
 
       expect(container.querySelector('div').textContent).toEqual('2');
     });
+
+    it('not trigger onChange if props change', () => {
+      const Demo = ({ value, onChange }) => {
+        const [mergedValue, setValue] = useMergedState(0, {
+          onChange,
+        });
+
+        return (
+          <>
+            <button
+              onClick={() => {
+                setValue(v => v + 1);
+              }}
+            >
+              {mergedValue}
+            </button>
+            <a
+              onClick={() => {
+                setValue(v => v + 1);
+                setValue(v => v + 1);
+              }}
+            />
+          </>
+        );
+      };
+
+      const onChange = jest.fn();
+      const { container } = render(<Demo onChange={onChange} />);
+
+      expect(container.querySelector('button').textContent).toEqual('0');
+      expect(onChange).not.toHaveBeenCalled();
+
+      // Click to change
+      fireEvent.click(container.querySelector('button'));
+      expect(container.querySelector('button').textContent).toEqual('1');
+      expect(onChange).toHaveBeenCalledWith(1, 0);
+      onChange.mockReset();
+
+      // Click to change twice in same time so should not trigger onChange twice
+      fireEvent.click(container.querySelector('a'));
+      expect(container.querySelector('button').textContent).toEqual('3');
+      expect(onChange).toHaveBeenCalledWith(3, 1);
+      onChange.mockReset();
+    });
   });
 
   describe('useLayoutEffect', () => {