본문으로 건너뛰기

함수: useAsyncBatchedCallback()

function useAsyncBatchedCallback<TValue>(fn, options): (item) => Promise<void>;

정의 위치: react-pacer/src/async-batcher/useAsyncBatchedCallback.ts:42

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

배칭된 비동기 함수는 개별 호출을 배치로 모아 배치 조건(최대 크기 도달, 대기 시간 경과 또는 사용자 지정 로직)이 충족되면 실행합니다. 반환된 함수는 항상 undefined로 이행되는 프로미스를 반환합니다 (배치 함수가 여러 항목을 함께 처리하기 때문입니다).

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

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

  • 수동 배치 실행
  • 배치 결과 및 상태 접근
  • 사용자 지정 useCallback 의존성

useAsyncBatcher 훅 사용을 고려합니다.

타입 매개변수​

TValue​

TValue

매개변수​

fn​

(items) => Promise&lt;unknown>

options​

ReactAsyncBatcherOptions&lt;TValue, { }>

반환값​

(item): Promise<void>;

매개변수​

item​

TValue

반환값​

Promise&lt;void>

예시​

// Batch API requests
const batchApiCall = useAsyncBatchedCallback(async (requests: ApiRequest[]) => {
  const results = await Promise.all(requests.map(req => fetch(req.url)));
  return results.map(res => res.json());
}, {
  maxSize: 10,   // Process when 10 requests collected
  wait: 1000     // Or after 1 second
});

// Use in event handlers
<button onClick={() => batchApiCall({ url: '/api/analytics', data: eventData })}>
  Track Event
</button>