Funktion: useQueuedValue()

function useQueuedValue<TValue, TSelected>(
   initialValue, 
   options, 
   selector?): [TValue, ReactQueuer<TValue, TSelected>]

function useQueuedValue<TValue, TSelected>(
   initialValue, 
   options, 
   selector?): [TValue, ReactQueuer<TValue, TSelected>]

Definiert in: react-pacer/src/queuer/useQueuedValue.ts:103

Ein React-Hook, der einen warteschlangenbasierten Wert erstellt, der Zustandsänderungen in Reihenfolge mit optionaler Verzögerung verarbeitet. Dieser Hook verwendet intern useQueuer, um eine Warteschlange von Zustandsänderungen zu verwalten und sie sequenziell anzuwenden.

Der warteschlangenbasierte Wert verarbeitet Änderungen in der Reihenfolge ihres Eingangs, mit optionalen Verzögerungen zwischen der Verarbeitung jeder Änderung. Dies ist nützlich für die Behandlung von Zustandsaktualisierungen, die in einer bestimmten Reihenfolge verarbeitet werden müssen, wie z. B. Animationen oder sequenzielle UI-Updates.

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

Der aktuelle warteschlangenbasierte Wert
Die Queuer-Instanz mit Steuerungsfunktionen

Zustandsverwaltung und Selektor

Der Hook verwendet TanStack Store zur reaktiven Zustandsverwaltung über die zugrunde liegende Queuer-Instanz. Der Parameter selector ermöglicht es Ihnen anzugeben, welche Queuer-Zustandsänderungen ein erneutes Rendern auslösen, was die Leistung optimiert, indem unnötige Neuberechnungen 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 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 [value, queuer] = useQueuedValue(initialValue, {
  wait: 500, // Wait 500ms between processing each change
  started: true // Start processing immediately
});

// Opt-in to re-render when queue processing state changes (optimized for loading indicators)
const [value, queuer] = useQueuedValue(
  initialValue,
  { wait: 500, started: true },
  (state) => ({
    isRunning: state.isRunning,
    isIdle: state.isIdle,
    status: state.status,
    pendingTick: state.pendingTick
  })
);

// Opt-in to re-render when queue contents change (optimized for displaying queue status)
const [value, queuer] = useQueuedValue(
  initialValue,
  { wait: 500, started: true },
  (state) => ({
    size: state.size,
    isEmpty: state.isEmpty,
    isFull: state.isFull
  })
);

// Opt-in to re-render when execution metrics change (optimized for stats display)
const [value, queuer] = useQueuedValue(
  initialValue,
  { wait: 500, started: true },
  (state) => ({
    executionCount: state.executionCount,
    expirationCount: state.expirationCount,
    rejectionCount: state.rejectionCount
  })
);

// Add changes to the queue
const handleChange = (newValue) => {
  queuer.addItem(newValue);
};

// Control the queue
const pauseProcessing = () => {
  queuer.stop();
};

const resumeProcessing = () => {
  queuer.start();
};

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

// Default behavior - no reactive state subscriptions
const [value, queuer] = useQueuedValue(initialValue, {
  wait: 500, // Wait 500ms between processing each change
  started: true // Start processing immediately
});

// Opt-in to re-render when queue processing state changes (optimized for loading indicators)
const [value, queuer] = useQueuedValue(
  initialValue,
  { wait: 500, started: true },
  (state) => ({
    isRunning: state.isRunning,
    isIdle: state.isIdle,
    status: state.status,
    pendingTick: state.pendingTick
  })
);

// Opt-in to re-render when queue contents change (optimized for displaying queue status)
const [value, queuer] = useQueuedValue(
  initialValue,
  { wait: 500, started: true },
  (state) => ({
    size: state.size,
    isEmpty: state.isEmpty,
    isFull: state.isFull
  })
);

// Opt-in to re-render when execution metrics change (optimized for stats display)
const [value, queuer] = useQueuedValue(
  initialValue,
  { wait: 500, started: true },
  (state) => ({
    executionCount: state.executionCount,
    expirationCount: state.expirationCount,
    rejectionCount: state.rejectionCount
  })
);

// Add changes to the queue
const handleChange = (newValue) => {
  queuer.addItem(newValue);
};

// Control the queue
const pauseProcessing = () => {
  queuer.stop();
};

const resumeProcessing = () => {
  queuer.start();
};

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

useQueuedValue

Funktion: useQueuedValue()

Zustandsverwaltung und Selektor

Typparameter

Parameter

initialValue

optionen

selector?

Gibt zurück

Beispiel

Bytes abonnieren

Bytes abonnieren