chore: merge main branch to v4

packages/hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ahooks",
-  "version": "3.7.10",
+  "version": "3.7.11",
   "description": "react hooks library",
   "keywords": [
     "ahooks",
@@ -38,6 +38,7 @@
     "intersection-observer": "^0.12.0",
     "js-cookie": "^2.x.x",
     "lodash": "^4.17.21",
+    "react-fast-compare": "^3.2.2",
     "resize-observer-polyfill": "^1.5.1",
     "screenfull": "^5.0.0",
     "tslib": "^2.4.1"

packages/hooks/src/useAntdTable/index.tsx

@@ -27,6 +27,7 @@ const useAntdTable = <TData extends Data, TParams extends Params>(
   } = options;
 
   const result = usePagination<TData, TParams>(service, {
+    ready,
     manual: true,
     ...rest,
     onSuccess(...args) {

packages/hooks/src/useCountDown/__tests__/index.test.ts

@@ -1,5 +1,6 @@
 import { act, renderHook } from '@testing-library/react';
-import useCountDown, { Options } from '../index';
+import type { Options } from '../index';
+import useCountDown from '../index';
 
 const setup = (options: Options = {}) =>
   renderHook((props: Options = options) => useCountDown(props));
@@ -235,4 +236,30 @@ describe('useCountDown', () => {
     const { result } = setup({ leftTime: -5 * 1000 });
     expect(result.current[0]).toBe(0);
   });
+
+  it('run with timeLeft should not be reset after targetDate changed', async () => {
+    let targetDate = Date.now() + 8000;
+
+    const { result, rerender } = setup({
+      leftTime: 6000,
+      targetDate,
+    });
+    expect(result.current[0]).toBe(6000);
+
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+    rerender({
+      leftTime: 6000,
+      targetDate: targetDate,
+    });
+    expect(result.current[0]).toBe(4000);
+
+    targetDate = Date.now() + 9000;
+    rerender({
+      leftTime: 6000,
+      targetDate: targetDate,
+    });
+    expect(result.current[0]).toBe(4000);
+  });
 });

packages/hooks/src/useCountDown/index.ts

@@ -42,13 +42,11 @@ const parseMs = (milliseconds: number): FormattedRes => {
 const useCountdown = (options: Options = {}) => {
   const { leftTime, targetDate, interval = 1000, onEnd } = options || {};
 
-  const target = useMemo<TDate>(() => {
-    if ('leftTime' in options) {
-      return isNumber(leftTime) && leftTime > 0 ? Date.now() + leftTime : undefined;
-    } else {
-      return targetDate;
-    }
-  }, [leftTime, targetDate]);
+  const memoLeftTime = useMemo<TDate>(() => {
+    return isNumber(leftTime) && leftTime > 0 ? Date.now() + leftTime : undefined;
+  }, [leftTime]);
+
+  const target = 'leftTime' in options ? memoLeftTime : targetDate;
 
   const [timeLeft, setTimeLeft] = useState(() => calcLeft(target));
 

packages/hooks/src/useDeepCompareEffect/index.en-US.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-Usage is the same as `useEffect`, but deps are compared with [lodash.isEqual](https://lodash.com/docs/4.17.15#isEqual).
+Usage is the same as `useEffect`, but deps are compared with [react-fast-compare](https://www.npmjs.com/package/react-fast-compare).
 
 ## Examples
 

packages/hooks/src/useDeepCompareEffect/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-用法与 useEffect 一致，但 deps 通过 [lodash isEqual](https://lodash.com/docs/4.17.15#isEqual) 进行深比较。
+用法与 useEffect 一致，但 deps 通过 [react-fast-compare](https://www.npmjs.com/package/react-fast-compare) 进行深比较。
 
 ## 代码演示
 

packages/hooks/src/useDeepCompareLayoutEffect/index.en-US.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-Usage is the same as `useLayoutEffect`, but deps are compared with [lodash.isEqual](https://lodash.com/docs/4.17.15#isEqual).
+Usage is the same as `useLayoutEffect`, but deps are compared with [react-fast-compare](https://www.npmjs.com/package/react-fast-compare).
 
 ## Examples
 

packages/hooks/src/useDeepCompareLayoutEffect/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-用法与 useLayoutEffect 一致，但 deps 通过 [lodash isEqual](https://lodash.com/docs/4.17.15#isEqual) 进行深比较。
+用法与 useLayoutEffect 一致，但 deps 通过 [react-fast-compare](https://www.npmjs.com/package/react-fast-compare) 进行深比较。
 
 ## 代码演示
 

packages/hooks/src/useLockFn/index.ts

@@ -9,11 +9,11 @@ function useLockFn<P extends any[] = any[], V = any>(fn: (...args: P) => Promise
       lockRef.current = true;
       try {
         const ret = await fn(...args);
-        lockRef.current = false;
         return ret;
       } catch (e) {
-        lockRef.current = false;
         throw e;
+      } finally {
+        lockRef.current = false;
       }
     },
     [fn],

packages/hooks/src/useRafInterval/index.ts

@@ -51,6 +51,12 @@ function useRafInterval(
   const fnRef = useLatest(fn);
   const timerRef = useRef<Handle>();
 
+  const clear = useCallback(() => {
+    if (timerRef.current) {
+      clearRafInterval(timerRef.current);
+    }
+  }, []);
+
   useEffect(() => {
     if (!isNumber(delay) || delay < 0) {
       return;
@@ -61,19 +67,9 @@ function useRafInterval(
     timerRef.current = setRafInterval(() => {
       fnRef.current();
     }, delay);
-    return () => {
-      if (timerRef.current) {
-        clearRafInterval(timerRef.current);
-      }
-    };
+    return clear;
   }, [delay]);
 
-  const clear = useCallback(() => {
-    if (timerRef.current) {
-      clearRafInterval(timerRef.current);
-    }
-  }, []);
-
   return clear;
 }
 

packages/hooks/src/utils/createEffectWithTarget.ts

@@ -40,8 +40,8 @@ const createEffectWithTarget = (useEffectType: typeof useEffect | typeof useLayo
 
       if (
         els.length !== lastElementRef.current.length ||
-        !depsAreSame(els, lastElementRef.current) ||
-        !depsAreSame(deps, lastDepsRef.current)
+        !depsAreSame(lastElementRef.current, els) ||
+        !depsAreSame(lastDepsRef.current, deps)
       ) {
         unLoadRef.current?.();
 

packages/hooks/src/utils/depsEqual.ts

@@ -1,5 +1,5 @@
 import type { DependencyList } from 'react';
-import isEqual from 'lodash/isEqual';
+import isEqual from 'react-fast-compare';
 
 export const depsEqual = (aDeps: DependencyList = [], bDeps: DependencyList = []) =>
   isEqual(aDeps, bDeps);