[Chapter 8] Debouncing & Throttling

[starvingorange]

✏️ 작업 내용

#️⃣ 연관된 이슈

#46

Week8-1.mp4

Week8-2.mp4

작업 결과 사진을 업로드해주세요.

💡 함께 공유하고 싶은 부분

해당 주차를 공부하면서 함께 이야기하고 싶은 주제를 남겨주세요.

(어려웠던 부분과 해결 과정, 핵심 코드, 참고한 자료 등)

🤔 질문

해당 주차 워크북을 공부하면서 궁금했던 질문들을 남겨주세요.

✅ 워크북 체크리스트

• 모든 핵심 키워드 정리를 마쳤나요?
  
• 핵심 키워드에 대해 완벽히 이해하였나요?
  
• 실습/미션을 수행하였나요?
  

✅ 컨벤션 체크리스트

• pr 제목을 컨벤션에 맞게 작성하였나요?
  
• pr에 해당되는 이슈를 연결하였나요?
  
• 적절한 라벨을 설정하였나요?
  
• 코드리뷰를 요청하기 위해 reviewer를 등록하였나요?
  
• 닉네임/main 브랜치의 최신 상태를 반영하고 있나요?
  

[duwlsssss]

지금은 훅이 매개변수가 없는 함수만 받을 수 있게 제한되어 있어요
다양한 매개변수를 받는 모든 형태의 함수를 받게 하려면, 제네릭을 추가하는 게 좋겠어요!

추가로 callback을 ref로 관리해 useThrottleCallback 훅을 사용하는 컴포넌트가 리렌더링되도 넘긴 callback이 새로 생성되지 않아야 쓰로틀링이 안전하게 동작할 것 같아요!

export default function useThrottledFn<T extends (...args: any[]) => void>(
  fn: T,
  delay: number
): T {
  const lastCalled = useRef(0);
  const savedFn = useRef(fn);

  // 최신 fn을 항상 유지
  useEffect(() => {
    savedFn.current = fn;
  }, [fn]);

  return useCallback((...args: Parameters<T>) => {
    const now = Date.now();
    if (now - lastCalled.current >= delay) {
      lastCalled.current = now;
      savedFn.current(...args); // 최신 함수 사용
    }
  }, [delay]) as T;
}

이런식으로 하면 더 확장성있는 훅이 될 것 같습니다

[leetaesk]

고생하셨습니다 !

[S-Gihun]

고생하셨습니다.