본문으로 건너뛰기

함수: useRateLimitedCallback()

function useRateLimitedCallback<TFn>(fn, options): (...args) => boolean;

정의 위치: react-pacer/src/rate-limiter/useRateLimitedCallback.ts:59

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

요청률 제한은 단순한 "하드 제한" 방식입니다. 한도에 도달할 때까지 모든 호출을 허용한 뒤 윈도우가 초기화될 때까지 이후 호출을 차단합니다. 스로틀이나 디바운스와 달리 호출 간격을 조정하거나 지능적으로 합치지 않습니다. 따라서 빠른 실행이 몰린 뒤 모든 호출이 차단되는 기간이 이어질 수 있습니다.

요청률 제한기는 두 가지 윈도우 유형을 지원합니다.

  • 'fixed': 윈도우 기간이 지나면 초기화되는 엄격한 윈도우입니다. 윈도우 안의 모든 실행이 한도에 포함되며 기간이 지나면 윈도우가 완전히 초기화됩니다.
  • 'sliding': 이전 실행이 만료됨에 따라 실행을 허용하는 롤링 윈도우입니다. 시간에 걸쳐 더 일정한 실행률을 제공합니다.

더 부드러운 실행 패턴이 필요하다면 다음을 고려합니다.

  • useThrottledCallback: 실행 간격을 일정하게 유지하려는 경우(예: UI 업데이트)
  • useDebouncedCallback: 빠른 호출을 단일 실행으로 합치려는 경우(예: 검색 입력)

요청률 제한은 API 요청률 제한처럼 엄격한 제한을 적용하거나 실행 빈도에 하드 캡이 필요한 시나리오에서 주로 사용해야 합니다.

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

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

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

useRateLimiter 훅 사용을 고려합니다.

타입 매개변수​

TFn​

TFn extends AnyFunction

매개변수​

fn​

TFn

options​

ReactRateLimiterOptions&lt;TFn, { }>

반환값​

(...args): boolean;

매개변수​

args​

...Parameters&lt;TFn>

반환값​

boolean

예시​

// Rate limit API calls to maximum 5 calls per minute with a sliding window
const makeApiCall = useRateLimitedCallback(
  (data: ApiData) => {
    return fetch('/api/endpoint', { method: 'POST', body: JSON.stringify(data) });
  },
  {
    limit: 5,
    window: 60000, // 1 minute
    windowType: 'sliding',
    onReject: () => {
      console.warn('API rate limit reached. Please wait before trying again.');
    }
  }
);