Funktion: useAsyncQueuedState()

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

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

Definiert in: react-pacer/src/async-queuer/useAsyncQueuedState.ts:151

Ein übergeordneter React-Hook, der eine AsyncQueuer-Instanz mit integriertem Zustandsmanagement erstellt.

Dieser Hook kombiniert einen AsyncQueuer mit React-Zustand, um die Warteschlangenelemente automatisch zu verfolgen. Er gibt ein Tupel zurück, das Folgendes enthält:

Das aktuelle Array der in der Warteschlange befindlichen Elemente als React-Zustand
Die Queuer-Instanz mit Methoden zur Steuerung der Warteschlange

Die Warteschlange kann konfiguriert werden mit

Maximale gleichzeitige Operationen
Maximale Warteschlangengröße
Verarbeitungsfunktion für Warteschlangenelemente
Verschiedene Lebenszyklus-Rückrufe

Der Zustand wird automatisch aktualisiert, wenn Elemente

Zur Warteschlange hinzugefügt werden
Aus der Warteschlange entfernt werden
Mit der Verarbeitung begonnen wird
Die Verarbeitung abgeschlossen wird

Zustandsverwaltung und Selektor

Der Hook verwendet TanStack Store für reaktives Zustandsmanagement über die zugrunde liegende Async-Queuer-Instanz. Der Parameter selector ermöglicht es Ihnen anzugeben, welche Änderungen am Async-Queuer-Zustand ein erneutes Rendern auslösen. Dies optimiert die Leistung, indem unnötige erneute Renderings verhindert werden, wenn irrelevante Zustandsänderungen auftreten.

Standardmäßig erfolgen keine reaktiven Zustands-Subscriptions und Sie müssen das Zustands-Tracking durch Bereitstellen einer Selector-Funktion aktivieren. Dies verhindert unnötige Renderings und gibt Ihnen die volle Kontrolle darüber, wann Ihre Komponente aktualisiert wird. Nur wenn Sie einen Selector bereitstellen, wird die Komponente neu gerendert, wenn sich die ausgewählten Zustandswerte ändern.

Verfügbare Eigenschaften des Async-Queuer-Zustands

activeItems: Derzeit vom Queuer verarbeitete Elemente
errorCount: Anzahl der Task-Ausführungen, die zu Fehlern geführt haben
expirationCount: Anzahl der Elemente, die aufgrund des Ablaufs entfernt wurden
isEmpty: Ob der Queuer keine zu verarbeitenden Elemente hat
isFull: Ob der Queuer seine maximale Kapazität erreicht hat
isIdle: Ob der Queuer gerade keine Elemente verarbeitet
isRunning: Ob der Queuer aktiv ist und Elemente automatisch verarbeitet
items: Array von Elementen, die derzeit auf die Verarbeitung warten
itemTimestamps: Zeitstempel, wann Elemente für die Ablaufverfolgung hinzugefügt wurden
lastResult: Das Ergebnis der letzten Task-Ausführung
pendingTick: Ob der Queuer einen ausstehenden Timeout für die Verarbeitung des nächsten Elements hat
rejectionCount: Anzahl der Elemente, die bei der Hinzufügung abgelehnt wurden
settledCount: Anzahl der abgeschlossenen Task-Ausführungen (Erfolg oder Fehler)
size: Anzahl der Elemente, die sich derzeit in der Warteschlange befinden
status: Aktueller Verarbeitungsstatus ('idle' | 'running' | 'stopped')
successCount: Anzahl der erfolgreich abgeschlossenen Task-Ausführungen

// 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;

// 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;

useAsyncQueuedState

Funktion: useAsyncQueuedState()

Zustandsverwaltung und Selektor

Typparameter

Parameter

fn

optionen

selector?

Gibt zurück

Beispiel

Bytes abonnieren

Bytes abonnieren