chore: merge main branch to v4 (#2510)

* refactor: replace lodash/isEqual with react-fast-compare (#2458) * refactor: replace lodash/isEqual with react-fast-compare * chore: update lock --------- Co-authored-by: 云泥 <1656081615@qq.com> * refactor(useRafInterval): optimize useEffect cleanup fn (#2426) * fix(useAntdTable): 修复动态设置 ready 失效的 bug (#2489) * refactor(useLockFn): catch to finally (#2421) * refactor(useLockFn): catch to finally * refactor(useLockFn): keep the throw e * refactor(createEffectWithTarget): the first parameter is old-deps (#2431) * fix(useCountDown): targetDate resets leftTime (#2346) * chore: update version --------- Co-authored-by: Guo Yunhe <i@guoyunhe.me> Co-authored-by: ice <49827327+GetWebHB@users.noreply.github.com> Co-authored-by: guaijie <30885718+guaijie@users.noreply.github.com> Co-authored-by: joe-leong <39672163+joe-leong@users.noreply.github.com> Co-authored-by: 潇见 <xiaojian.lj@antgroup.com>
alibaba · Apr 11, 2024 · 9e14694 · 9e14694
1 parent caffbbe
commit 9e14694
Show file tree

Hide file tree

Showing 13 changed files with 54 additions and 30 deletions.
diff --git a/packages/hooks/package.json b/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"

diff --git a/packages/hooks/src/useAntdTable/index.tsx b/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) {

diff --git a/packages/hooks/src/useCountDown/__tests__/index.test.ts b/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);
+  });
 });
diff --git a/packages/hooks/src/useCountDown/index.ts b/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));
 

diff --git a/packages/hooks/src/useDeepCompareEffect/index.en-US.md b/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
 

diff --git a/packages/hooks/src/useDeepCompareEffect/index.zh-CN.md b/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) 进行深比较。
 
 ## 代码演示
 

diff --git a/packages/hooks/src/useDeepCompareLayoutEffect/index.en-US.md b/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
 

diff --git a/packages/hooks/src/useDeepCompareLayoutEffect/index.zh-CN.md b/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) 进行深比较。
 
 ## 代码演示
 

diff --git a/packages/hooks/src/useLockFn/index.ts b/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],

diff --git a/packages/hooks/src/useRafInterval/index.ts b/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;
 }
 

diff --git a/packages/hooks/src/utils/createEffectWithTarget.ts b/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?.();
 

diff --git a/packages/hooks/src/utils/depsEqual.ts b/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);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
-Original file line number
+Diff line change
@@ Expand Up / @@ -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
@@ Expand Down @@