diff --git a/packages/hooks/package.json b/packages/hooks/package.json index 95c2659720..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", @@ -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 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) { 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)); diff --git a/packages/hooks/src/useDeepCompareEffect/index.en-US.md b/packages/hooks/src/useDeepCompareEffect/index.en-US.md index 630f40ab41..95bab17cdf 100644 --- 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 index fae5684e64..c1566b312e 100644 --- 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 index 28134ea1f8..1277002e24 100644 --- 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 index 7e388a8b46..144fc9773b 100644 --- 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 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], 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; } 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?.(); 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 f7e5005428..c64b0a8fba 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -113,6 +113,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 @@ -124,6 +125,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 @@ -24475,7 +24477,6 @@ packages: { integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==, } - dev: true /react-helmet-async/1.3.0_biqbaboplfbrettd7655fr4n2y: resolution: