본문으로 건너뛰기

함수: useThrottledCallback()

function useThrottledCallback<TFn>(fn, options): (...args) => void;

정의 위치: react-pacer/src/throttler/useThrottledCallback.ts:43

콜백 함수의 스로틀된 버전을 생성하는 React 훅입니다. 이 훅은 기본 throttle 함수를 래핑합니다. 이 함수는 @tanstack/pacer에서 내보내지만, 반응형 옵션과 안정적인 함수 참조를 활용하도록 React에 최적화되어 있습니다.

스로틀된 함수는 호출 횟수와 관계없이 지정된 대기 시간 동안 최대 한 번만 실행됩니다. 대기 시간 동안 여러 번 호출하면 첫 번째 호출만 실행되며, 이후 호출은 대기 시간이 경과할 때까지 무시됩니다.

이 훅은 useThrottler보다 간단한 API를 제공하므로 기본적인 스로틀 요구 사항에 적합합니다. 그러나 내부 Throttler 인스턴스는 노출하지 않습니다.

다음과 같은 고급 기능이 필요하다면:

  • 수동 취소
  • 실행 횟수 접근
  • 사용자 지정 useCallback 의존성

useThrottler 훅 사용을 고려합니다.

타입 매개변수​

TFn​

TFn extends AnyFunction

매개변수​

fn​

TFn

options​

ReactThrottlerOptions&lt;TFn, { }>

반환값​

(...args): void;

매개변수​

args​

...Parameters&lt;TFn>

반환값​

void

예시​

// Throttle a window resize handler
const handleResize = useThrottledCallback(() => {
  updateLayoutMeasurements();
}, {
  wait: 100 // Execute at most once every 100ms
});

// Use in an event listener
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, [handleResize]);