본문으로 건너뛰기

함수: useAsyncRateLimitedCallback()

function useAsyncRateLimitedCallback<TFn>(fn, options): (...args) => Promise<Awaited<ReturnType<TFn>> | undefined>;

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

비동기 콜백 함수의 요청률이 제한된 버전을 생성하는 React 훅입니다. 이 훅은 useAsyncRateLimiter 훅을 간편하게 래핑하며, React 컴포넌트에서 사용할 수 있는 안정적인 비동기 요청률 제한 함수 참조를 제공합니다.

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

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

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

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

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

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

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

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

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

useAsyncRateLimiter 훅 사용을 고려합니다.

타입 매개변수

TFn

TFn extends AnyAsyncFunction

매개변수

fn

TFn

options

ReactAsyncRateLimiterOptions&lt;TFn, { }>

반환값

(...args): Promise<Awaited<ReturnType<TFn>> | undefined>;

매개변수

args

...Parameters&lt;TFn>

반환값

Promise&lt;Awaited&lt;ReturnType&lt;TFn>> | undefined>

예시

// Rate limit async API calls to maximum 5 calls per minute with a sliding window
const makeApiCall = useAsyncRateLimitedCallback(
async (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.');
}
}
);