diff --git a/.changeset/early-guests-peel.md b/.changeset/early-guests-peel.md new file mode 100644 index 00000000..ce68ce14 --- /dev/null +++ b/.changeset/early-guests-peel.md @@ -0,0 +1,7 @@ +--- +"@nf-team/react": patch +--- + +- fix(@nf-team/react): useThrottleCallback dependencyList 추가 +- refactor(useThrottleCallback): 파라미터 순서 수정 +- fix(useLessThenScrollY): useThrottleCallback 사용중인 곳 파라미터 수정 diff --git a/packages/react/src/hooks/useLessThenScrollY.ts b/packages/react/src/hooks/useLessThenScrollY.ts index f00156ee..52b94d5f 100644 --- a/packages/react/src/hooks/useLessThenScrollY.ts +++ b/packages/react/src/hooks/useLessThenScrollY.ts @@ -10,7 +10,7 @@ function useLessThenScrollY(targetScrollY = 0, delay = 200): boolean { [targetScrollY], ); - const throttledCallback = useThrottleCallback(handleScrollAction, delay); + const throttledCallback = useThrottleCallback(handleScrollAction, [], delay); useEffect(() => { window.addEventListener('scroll', throttledCallback); diff --git a/packages/react/src/hooks/useThrottleCallback.test.ts b/packages/react/src/hooks/useThrottleCallback.test.ts index 4222db2d..4dac85de 100644 --- a/packages/react/src/hooks/useThrottleCallback.test.ts +++ b/packages/react/src/hooks/useThrottleCallback.test.ts @@ -15,7 +15,7 @@ describe('useThrottleCallback', () => { jest.clearAllTimers(); }); - const useThrottleCallbackHook = () => renderHook(() => useThrottleCallback(callback, delay)); + const useThrottleCallbackHook = () => renderHook(() => useThrottleCallback(callback, [], delay)); context('delay 시간이 되지 않은 경우', () => { it('callback 함수가 호출되지 않아야만 한다', async () => { diff --git a/packages/react/src/hooks/useThrottleCallback.ts b/packages/react/src/hooks/useThrottleCallback.ts index 6d409091..61cec326 100644 --- a/packages/react/src/hooks/useThrottleCallback.ts +++ b/packages/react/src/hooks/useThrottleCallback.ts @@ -1,7 +1,8 @@ -import { useCallback, useRef } from 'react'; +import { DependencyList, useCallback, useRef } from 'react'; function useThrottleCallback( callback: (...args: U) => void, + dependencyList: DependencyList[], delay: number, ) { const timer = useRef | null>(null); @@ -13,7 +14,7 @@ function useThrottleCallback( timer.current = null; }, delay); } - }, [callback, delay]); + }, [...dependencyList, delay]); return throttledCallback; }