Funktion: useQueuer()

function useQueuer<TValue, TSelected>(
   fn, 
   options, 
selector): ReactQueuer<TValue, TSelected>

function useQueuer<TValue, TSelected>(
   fn, 
   options, 
selector): ReactQueuer<TValue, TSelected>

Definiert in: react-pacer/src/queuer/useQueuer.ts:132

Ein React Hook, der eine Queuer-Instanz erstellt und verwaltet.

Dies ist ein Hook auf niedrigerer Ebene, der direkten Zugriff auf die Funktionalität des Queuers ohne integriertes State-Management bietet. Dies ermöglicht es Ihnen, ihn mit jeder beliebigen State-Management-Lösung zu integrieren (useState, Redux, Zustand usw.), indem Sie den `onItemsChange`-Callback nutzen.

Für einen Hook mit integriertem State-Management siehe useQueuedState.

Der Queuer erweitert die Basis-Queue um Verarbeitungsfähigkeiten. Elemente werden synchron in der Reihenfolge verarbeitet, mit optionalen Verzögerungen zwischen der Verarbeitung jedes Elements. Der Queuer enthält einen internen Taktmechanismus, der gestartet und gestoppt werden kann, was ihn nützlich als Scheduler macht. Wenn gestartet, verarbeitet er ein Element pro Takt mit einer optionalen Wartezeit zwischen den Takten.

Standardmäßig wird das FIFO-Verhalten (First In First Out) verwendet, kann aber durch Angabe der Position 'front' beim Hinzufügen von Elementen für LIFO (Last In First Out) konfiguriert werden.

Zustandsverwaltung und Selektor

Der Hook verwendet TanStack Store für reaktives Zustandsmanagement. Der Parameter selector ermöglicht es Ihnen anzugeben, welche Zustandsänderungen ein erneutes Rendern auslösen, wodurch die Leistung optimiert wird, 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 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 queue = useQueuer(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 }
);

// Opt-in to re-render when queue size changes (optimized for displaying queue length)
const queue = useQueuer(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 },
  (state) => ({
    size: state.size,
    isEmpty: state.isEmpty,
    isFull: state.isFull
  })
);

// Opt-in to re-render when processing state changes (optimized for loading indicators)
const queue = useQueuer(
  (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 queue = useQueuer(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 },
  (state) => ({
    executionCount: state.executionCount,
    expirationCount: state.expirationCount,
    rejectionCount: state.rejectionCount
  })
);

// Example with custom state management and scheduling
const [items, setItems] = useState([]);

const queue = useQueuer(
  (item) => console.log('Processing:', item),
  {
    started: true, // Start processing immediately
    wait: 1000,    // Process one item every second
    onItemsChange: (queue) => setItems(queue.peekAllItems()),
    getPriority: (item) => item.priority // Process higher priority items first
  }
);

// Add items to process - they'll be handled automatically
queue.addItem('task1');
queue.addItem('task2');

// Control the scheduler
queue.stop();  // Pause processing
queue.start(); // Resume processing

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

// Default behavior - no reactive state subscriptions
const queue = useQueuer(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 }
);

// Opt-in to re-render when queue size changes (optimized for displaying queue length)
const queue = useQueuer(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 },
  (state) => ({
    size: state.size,
    isEmpty: state.isEmpty,
    isFull: state.isFull
  })
);

// Opt-in to re-render when processing state changes (optimized for loading indicators)
const queue = useQueuer(
  (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 queue = useQueuer(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 },
  (state) => ({
    executionCount: state.executionCount,
    expirationCount: state.expirationCount,
    rejectionCount: state.rejectionCount
  })
);

// Example with custom state management and scheduling
const [items, setItems] = useState([]);

const queue = useQueuer(
  (item) => console.log('Processing:', item),
  {
    started: true, // Start processing immediately
    wait: 1000,    // Process one item every second
    onItemsChange: (queue) => setItems(queue.peekAllItems()),
    getPriority: (item) => item.priority // Process higher priority items first
  }
);

// Add items to process - they'll be handled automatically
queue.addItem('task1');
queue.addItem('task2');

// Control the scheduler
queue.stop();  // Pause processing
queue.start(); // Resume processing

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

useQueuer

Funktion: useQueuer()

Zustandsverwaltung und Selektor

Typparameter

Parameter

fn

optionen

selector

Gibt zurück

Beispiel

Bytes abonnieren

Bytes abonnieren