From e55414b94776f329c9c55ab29b23d94ac1b9d8e8 Mon Sep 17 00:00:00 2001 From: Guo Yunhe Date: Thu, 29 Feb 2024 22:01:28 +0800 Subject: [PATCH 1/7] refactor: replace lodash/isEqual with react-fast-compare (#2458) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: replace lodash/isEqual with react-fast-compare * chore: update lock --------- Co-authored-by: 云泥 <1656081615@qq.com> --- packages/hooks/package.json | 1 + packages/hooks/src/useDeepCompareEffect/index.en-US.md | 2 +- packages/hooks/src/useDeepCompareEffect/index.zh-CN.md | 2 +- .../hooks/src/useDeepCompareLayoutEffect/index.en-US.md | 2 +- .../hooks/src/useDeepCompareLayoutEffect/index.zh-CN.md | 2 +- packages/hooks/src/utils/depsEqual.ts | 2 +- pnpm-lock.yaml | 9 +++++++++ 7 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/hooks/package.json b/packages/hooks/package.json index 95c2659720..47c49ed1b4 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -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/useDeepCompareEffect/index.en-US.md b/packages/hooks/src/useDeepCompareEffect/index.en-US.md index b8a8ad4047..28e9d3898d 100644 --- a/packages/hooks/src/useDeepCompareEffect/index.en-US.md +++ b/packages/hooks/src/useDeepCompareEffect/index.en-US.md @@ -5,7 +5,7 @@ nav: # useDeepCompareEffect -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 index 056a2be0dd..d96fe9f218 100644 --- a/packages/hooks/src/useDeepCompareEffect/index.zh-CN.md +++ b/packages/hooks/src/useDeepCompareEffect/index.zh-CN.md @@ -5,7 +5,7 @@ nav: # useDeepCompareEffect -用法与 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 index 03d25e7b96..0b1e8cd48b 100644 --- a/packages/hooks/src/useDeepCompareLayoutEffect/index.en-US.md +++ b/packages/hooks/src/useDeepCompareLayoutEffect/index.en-US.md @@ -5,7 +5,7 @@ nav: # useDeepCompareLayoutEffect -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 index 1816813a25..3d5fb32cef 100644 --- a/packages/hooks/src/useDeepCompareLayoutEffect/index.zh-CN.md +++ b/packages/hooks/src/useDeepCompareLayoutEffect/index.zh-CN.md @@ -5,7 +5,7 @@ nav: # useDeepCompareLayoutEffect -用法与 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/utils/depsEqual.ts b/packages/hooks/src/utils/depsEqual.ts index 7d8b710be4..7a76ccc514 100644 --- 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 index 064f786ddd..0551ec1ab2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -111,6 +111,7 @@ importers: mockjs: ^1.1.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-drag-listview: ^0.1.6 + react-fast-compare: ^3.2.2 react-json-view: ^1.21.3 resize-observer-polyfill: ^1.5.1 screenfull: ^5.0.0 @@ -122,6 +123,7 @@ importers: js-cookie: 2.2.1 lodash: 4.17.21 react: 18.2.0 + react-fast-compare: 3.2.2 resize-observer-polyfill: 1.5.1 screenfull: 5.2.0 tslib: 2.5.0 @@ -19137,6 +19139,13 @@ packages: react: 18.2.0 dev: true + /react-fast-compare/3.2.2: + resolution: + { + integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==, + } + dev: false + /react-is/16.13.1: resolution: { From 256a7537b3c4433f24cb1920ba0c7fed3f6bac5e Mon Sep 17 00:00:00 2001 From: ice <49827327+GetWebHB@users.noreply.github.com> Date: Tue, 5 Mar 2024 20:32:01 +0800 Subject: [PATCH 2/7] refactor(useRafInterval): optimize useEffect cleanup fn (#2426) --- packages/hooks/src/useRafInterval/index.ts | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/packages/hooks/src/useRafInterval/index.ts b/packages/hooks/src/useRafInterval/index.ts index e39c8c1774..15ad94226c 100644 --- 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(); + 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; } From 15afaa6e1c121a9005d3387578ddbeb2e6af9e2f Mon Sep 17 00:00:00 2001 From: guaijie <30885718+guaijie@users.noreply.github.com> Date: Wed, 13 Mar 2024 21:52:59 +0800 Subject: [PATCH 3/7] =?UTF-8?q?fix(useAntdTable):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=AE=BE=E7=BD=AE=20ready=20=E5=A4=B1?= =?UTF-8?q?=E6=95=88=E7=9A=84=20bug=20(#2489)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/hooks/src/useAntdTable/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/hooks/src/useAntdTable/index.tsx b/packages/hooks/src/useAntdTable/index.tsx index e487bc4796..9ae143dc59 100644 --- a/packages/hooks/src/useAntdTable/index.tsx +++ b/packages/hooks/src/useAntdTable/index.tsx @@ -27,6 +27,7 @@ const useAntdTable = ( } = options; const result = usePagination(service, { + ready, manual: true, ...rest, onSuccess(...args) { From 866087af5f901fdb42bf108361ebbb26de40816f Mon Sep 17 00:00:00 2001 From: ice <49827327+GetWebHB@users.noreply.github.com> Date: Wed, 13 Mar 2024 21:55:14 +0800 Subject: [PATCH 4/7] refactor(useLockFn): catch to finally (#2421) * refactor(useLockFn): catch to finally * refactor(useLockFn): keep the throw e --- packages/hooks/src/useLockFn/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/hooks/src/useLockFn/index.ts b/packages/hooks/src/useLockFn/index.ts index 07d1d8d6d8..5569a65a1a 100644 --- a/packages/hooks/src/useLockFn/index.ts +++ b/packages/hooks/src/useLockFn/index.ts @@ -9,11 +9,11 @@ function useLockFn

(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], From 43d3ae87c716b6b590d24c0ef238133772ff60eb Mon Sep 17 00:00:00 2001 From: ice <49827327+GetWebHB@users.noreply.github.com> Date: Wed, 13 Mar 2024 22:00:02 +0800 Subject: [PATCH 5/7] refactor(createEffectWithTarget): the first parameter is old-deps (#2431) --- packages/hooks/src/utils/createEffectWithTarget.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/hooks/src/utils/createEffectWithTarget.ts b/packages/hooks/src/utils/createEffectWithTarget.ts index 4b82b66437..9600cfcc38 100644 --- 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?.(); From 120099c7019a88938d8d52a5d4f8f3db39111e20 Mon Sep 17 00:00:00 2001 From: joe-leong <39672163+joe-leong@users.noreply.github.com> Date: Wed, 13 Mar 2024 22:04:23 +0800 Subject: [PATCH 6/7] fix(useCountDown): targetDate resets leftTime (#2346) --- .../src/useCountDown/__tests__/index.test.ts | 29 ++++++++++++++++++- packages/hooks/src/useCountDown/index.ts | 12 ++++---- 2 files changed, 33 insertions(+), 8 deletions(-) diff --git a/packages/hooks/src/useCountDown/__tests__/index.test.ts b/packages/hooks/src/useCountDown/__tests__/index.test.ts index 57b527bdef..5a8365d37a 100644 --- 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 index 6f64a9711f..bcb8866b76 100644 --- 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(() => { - if ('leftTime' in options) { - return isNumber(leftTime) && leftTime > 0 ? Date.now() + leftTime : undefined; - } else { - return targetDate; - } - }, [leftTime, targetDate]); + const memoLeftTime = useMemo(() => { + return isNumber(leftTime) && leftTime > 0 ? Date.now() + leftTime : undefined; + }, [leftTime]); + + const target = 'leftTime' in options ? memoLeftTime : targetDate; const [timeLeft, setTimeLeft] = useState(() => calcLeft(target)); From dff279514521ef30c969e48e67939f9a22577ff6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BD=87=E8=A7=81?= Date: Mon, 1 Apr 2024 10:11:31 +0800 Subject: [PATCH 7/7] chore: update version --- packages/hooks/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/hooks/package.json b/packages/hooks/package.json index 47c49ed1b4..47cd4b859b 100644 --- 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",