useQueuedValue

Function: useQueuedValue()

function useQueuedValue<TValue>(initialValue, options): [TValue, Queuer<TValue>]

function useQueuedValue<TValue>(initialValue, options): [TValue, Queuer<TValue>]

Defined in: react-pacer/src/queuer/useQueuedValue.ts:40

A React hook that creates a queued value that processes state changes in order with an optional delay. This hook uses useQueuer internally to manage a queue of state changes and apply them sequentially.

The queued value will process changes in the order they are received, with optional delays between processing each change. This is useful for handling state updates that need to be processed in a specific order, like animations or sequential UI updates.

The hook returns a tuple containing:

The current queued value
The queuer instance with control methods

Type Parameters

• TValue

Parameters

initialValue

TValue

options

QueuerOptions<TValue> = {}

Returns

[TValue, Queuer<TValue>]

Example

tsx

// Queue state changes with a delay between each
const [value, queuer] = useQueuedValue(initialValue, {
  wait: 500, // Wait 500ms between processing each change
  started: true // Start processing immediately
});

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

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

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

// Queue state changes with a delay between each
const [value, queuer] = useQueuedValue(initialValue, {
  wait: 500, // Wait 500ms between processing each change
  started: true // Start processing immediately
});

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

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

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