함수: useAsyncQueuedState()

function useAsyncQueuedState<TValue, TSelected>(
   fn, 
   options, 
   selector?): [TValue[], PreactAsyncQueuer<TValue, TSelected>];

정의 위치: preact-pacer/src/async-queuer/useAsyncQueuedState.ts:151

내장 상태 관리 기능이 있는 AsyncQueuer 인스턴스를 생성하는 상위 수준 Preact 훅입니다.

AsyncQueuer와 Preact 상태를 결합해 큐 항목을 자동으로 추적합니다. 다음 요소를 담은 튜플을 반환합니다.

• Preact 상태로 제공되는 현재 큐 항목 배열
• 큐 제어 메서드를 제공하는 큐어 인스턴스

큐에서 다음 항목을 구성할 수 있습니다.

• 최대 동시 작업 수
• 최대 큐 크기
• 큐 항목 처리 함수
• 다양한 수명 주기 콜백

항목이 다음 상태가 될 때마다 상태가 자동으로 업데이트됩니다.

• 큐에 추가됨
• 큐에서 제거됨
• 처리 시작됨
• 처리 완료됨

상태 관리와 셀렉터

훅은 내부 비동기 큐어 인스턴스를 통해 반응형 상태 관리에 TanStack Store를 사용합니다. selector 매개변수를 사용하면 비동기 큐어 상태의 어떤 변경이 재렌더링을 트리거할지 지정할 수 있으며, 관련 없는 상태가 변경될 때 불필요한 재렌더링을 방지하여 성능을 최적화합니다.

기본적으로 반응형 상태 구독은 없습니다. 상태 추적을 명시적으로 활성화하려면 셀렉터 함수를 제공해야 합니다. 이렇게 하면 불필요한 재렌더링을 방지하고 컴포넌트 업데이트 시점을 완전히 제어할 수 있습니다. 셀렉터를 제공한 경우에만 선택한 상태 값이 변경될 때 컴포넌트가 다시 렌더링됩니다.

사용 가능한 비동기 큐어 상태 속성:

• activeItems: 큐어가 현재 처리 중인 항목
• errorCount: 오류가 발생한 작업 실행 횟수
• expirationCount: 만료로 제거된 항목 수
• isEmpty: 큐어에 처리할 항목이 없는지 여부
• isFull: 큐어가 최대 용량에 도달했는지 여부
• isIdle: 큐어가 현재 어떤 항목도 처리하지 않는지 여부
• isRunning: 큐어가 활성 상태이며 항목을 자동으로 처리할지 여부
• items: 현재 처리 대기 중인 항목 배열
• itemTimestamps: 만료 추적을 위해 항목이 추가된 시점의 타임스탬프
• lastResult: 가장 최근 작업 실행 결과
• pendingTick: 큐어에 다음 항목 처리를 위한 대기 중 타임아웃이 있는지 여부
• rejectionCount: 추가가 거부된 항목 수
• settledCount: 성공 또는 오류로 완료된 작업 실행 횟수
• size: 현재 큐에 있는 항목 수
• status: 현재 처리 상태('idle' | 'running' | 'stopped')
• successCount: 성공적으로 완료된 작업 실행 횟수

타입 매개변수

TValue

TValue

TSelected

TSelected extends Pick<AsyncQueuerState<TValue>, "items"> = Pick<AsyncQueuerState<TValue>, "items">

매개변수

fn

(value) => Promise<any>

options

PreactAsyncQueuerOptions<TValue, TSelected> = {}

selector?

(state) => TSelected

반환값

[TValue[], PreactAsyncQueuer<TValue, TSelected>]

예시

// Default behavior - no reactive state subscriptions
const [queueItems, asyncQueuer] = useAsyncQueuedState(
  async (item) => {
    const result = await processItem(item);
    return result;
  },
  {
    concurrency: 2,
    maxSize: 100,
    started: true
  }
);

// Opt-in to re-render when queue contents change (optimized for displaying queue items)
const [queueItems, asyncQueuer] = useAsyncQueuedState(
  async (item) => {
    const result = await processItem(item);
    return result;
  },
  { concurrency: 2, maxSize: 100, started: true },
  (state) => ({
    items: state.items,
    size: state.size,
    isEmpty: state.isEmpty,
    isFull: state.isFull
  })
);

// Opt-in to re-render when processing state changes (optimized for loading indicators)
const [queueItems, asyncQueuer] = useAsyncQueuedState(
  async (item) => {
    const result = await processItem(item);
    return result;
  },
  { concurrency: 2, maxSize: 100, started: true },
  (state) => ({
    isRunning: state.isRunning,
    isIdle: state.isIdle,
    status: state.status,
    activeItems: state.activeItems,
    pendingTick: state.pendingTick
  })
);

// Opt-in to re-render when execution metrics change (optimized for stats display)
const [queueItems, asyncQueuer] = useAsyncQueuedState(
  async (item) => {
    const result = await processItem(item);
    return result;
  },
  { concurrency: 2, maxSize: 100, started: true },
  (state) => ({
    successCount: state.successCount,
    errorCount: state.errorCount,
    settledCount: state.settledCount,
    expirationCount: state.expirationCount,
    rejectionCount: state.rejectionCount
  })
);

// Opt-in to re-render when results are available (optimized for data display)
const [queueItems, asyncQueuer] = useAsyncQueuedState(
  async (item) => {
    const result = await processItem(item);
    return result;
  },
  { concurrency: 2, maxSize: 100, started: true },
  (state) => ({
    lastResult: state.lastResult,
    successCount: state.successCount
  })
);

// Add items to queue - state updates automatically
asyncQueuer.addItem(async () => {
  const result = await fetchData();
  return result;
});

// Start processing
asyncQueuer.start();

// Stop processing
asyncQueuer.stop();

// queueItems reflects current queue state
const pendingCount = asyncQueuer.peekPendingItems().length;

// Access the selected async queuer state (will be empty object {} unless selector provided)
const { size, isRunning, activeItems } = asyncQueuer.state;