Funktion: useQueuedState()

function useQueuedState<TValue, TSelected>(
   fn, 
   options, 
   selector?): [TValue[], (item, position?, runOnItemsChange?) => boolean, ReactQueuer<TValue, TSelected>]

function useQueuedState<TValue, TSelected>(
   fn, 
   options, 
   selector?): [TValue[], (item, position?, runOnItemsChange?) => boolean, ReactQueuer<TValue, TSelected>]

Definiert in: react-pacer/src/queuer/useQueuedState.ts:119

Ein React-Hook, der einen Queuer mit verwaltetem Zustand erstellt und useState von React mit Warteschlangenfunktionalität kombiniert. Dieser Hook stellt sowohl den aktuellen Warteschlangenzustand als auch Methoden zur Steuerung der Warteschlange bereit.

Der Warteschlangenzustand wird automatisch aktualisiert, wenn Elemente zur Warteschlange hinzugefügt, entfernt oder neu geordnet werden. Alle Warteschlangenoperationen spiegeln sich im Zustandsarray wider, das vom Hook zurückgegeben wird.

Die Warteschlange kann gestartet und gestoppt werden, um Elemente automatisch in einem bestimmten Intervall zu verarbeiten, was sie nützlich als Scheduler macht. Wenn sie gestartet wird, verarbeitet sie ein Element pro Tick, mit einer optionalen Wartezeit zwischen den Ticks.

Der Hook gibt ein Tupel zurück, das enthält

Der aktuelle Warteschlangenzustand als Array
Die Warteschlangeninstanz mit Methoden zur Warteschlangenmanipulation

Zustandsverwaltung und Selektor

Der Hook verwendet TanStack Store für reaktives Zustandsmanagement über die zugrunde liegende Queuer-Instanz. Der Parameter selector ermöglicht es Ihnen, anzugeben, welche Änderungen am Queuer-Zustand ein erneutes Rendern auslösen, wodurch die Leistung optimiert wird, indem unnötige Renderings vermieden 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 Queuer-Zustandseigenschaften

executionCount: Anzahl der Elemente, die vom Queuer verarbeitet wurden
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
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
size: Anzahl der Elemente, die sich derzeit in der Warteschlange befinden
status: Aktueller Verarbeitungsstatus ('idle' | 'running' | 'stopped')

// Default behavior - no reactive state subscriptions
const [items, addItem, queue] = useQueuedState(
  (item) => console.log('Processing:', item),
  {
    initialItems: ['item1', 'item2'],
    started: true,
    wait: 1000,
    getPriority: (item) => item.priority
  }
);

// Opt-in to re-render when queue contents change (optimized for displaying queue items)
const [items, addItem, queue] = useQueuedState(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 },
  (state) => ({
    items: state.items,
    size: state.size,
    isEmpty: state.isEmpty
  })
);

// Opt-in to re-render when processing state changes (optimized for loading indicators)
const [items, addItem, queue] = useQueuedState(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 },
  (state) => ({
    isRunning: state.isRunning,
    isIdle: state.isIdle,
    status: state.status,
    pendingTick: state.pendingTick
  })
);

// Opt-in to re-render when execution metrics change (optimized for stats display)
const [items, addItem, queue] = useQueuedState(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 },
  (state) => ({
    executionCount: state.executionCount,
    expirationCount: state.expirationCount,
    rejectionCount: state.rejectionCount
  })
);

// Add items to queue
const handleAdd = (item) => {
  addItem(item);
};

// Start automatic processing
const startProcessing = () => {
  queue.start();
};

// Stop automatic processing
const stopProcessing = () => {
  queue.stop();
};

// Manual processing still available
const handleProcess = () => {
  const nextItem = queue.getNextItem();
  if (nextItem) {
    processItem(nextItem);
  }
};

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

// Default behavior - no reactive state subscriptions
const [items, addItem, queue] = useQueuedState(
  (item) => console.log('Processing:', item),
  {
    initialItems: ['item1', 'item2'],
    started: true,
    wait: 1000,
    getPriority: (item) => item.priority
  }
);

// Opt-in to re-render when queue contents change (optimized for displaying queue items)
const [items, addItem, queue] = useQueuedState(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 },
  (state) => ({
    items: state.items,
    size: state.size,
    isEmpty: state.isEmpty
  })
);

// Opt-in to re-render when processing state changes (optimized for loading indicators)
const [items, addItem, queue] = useQueuedState(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 },
  (state) => ({
    isRunning: state.isRunning,
    isIdle: state.isIdle,
    status: state.status,
    pendingTick: state.pendingTick
  })
);

// Opt-in to re-render when execution metrics change (optimized for stats display)
const [items, addItem, queue] = useQueuedState(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 },
  (state) => ({
    executionCount: state.executionCount,
    expirationCount: state.expirationCount,
    rejectionCount: state.rejectionCount
  })
);

// Add items to queue
const handleAdd = (item) => {
  addItem(item);
};

// Start automatic processing
const startProcessing = () => {
  queue.start();
};

// Stop automatic processing
const stopProcessing = () => {
  queue.stop();
};

// Manual processing still available
const handleProcess = () => {
  const nextItem = queue.getNextItem();
  if (nextItem) {
    processItem(nextItem);
  }
};

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

useQueuedState

Funktion: useQueuedState()

Zustandsverwaltung und Selektor

Typparameter

Parameter

fn

optionen

selector?

Gibt zurück

Beispiel

Bytes abonnieren

Bytes abonnieren