Merge pull request #53 from mbti-nf-team/fix/useThrottleCallback

fix(@nf-team/react): useThrottleCallback dependencyList 추가
mbti-nf-team · Oct 28, 2023 · 7f8835a · 7f8835a
2 parents b9a7cb1 + dbf3669
commit 7f8835a
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/.changeset/early-guests-peel.md 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
@@ -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
@@ -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
@@ -1,7 +1,8 @@
-import { useCallback, useRef } from 'react';
+import { DependencyList, useCallback, useRef } from 'react';
 
 function useThrottleCallback<U extends never[]>(
   callback: (...args: U) => void,
+  dependencyList: DependencyList[],
   delay: number,
 ) {
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -13,7 +14,7 @@ function useThrottleCallback<U extends never[]>(
         timer.current = null;
       }, delay);
     }
-  }, [callback, delay]);
+  }, [...dependencyList, delay]);
 
   return throttledCallback;
 }