useQueue

A hook that returns a reactive Queue with enqueue, dequeue, peek, and isEmpty operations.

Installation

import { useQueue } from 'data-strcture-react-hooks';

Basic Usage

function MyComponent() {
  const queue = useQueue(['item1', 'item2']);

  return (
    <div>
      <p>Size: {queue.size}</p>
      <button onClick={() => queue.enqueue('item3')}>Enqueue</button>
      <button onClick={() => queue.dequeue()}>Dequeue</button>
    </div>
  );
}

API Reference

Parameters

  • defaultValue (T[]): The initial queue values

Returns

A reactive Queue object with the following methods and properties:

Methods

  • enqueue(item) - Adds an item to the back of the queue
  • dequeue() - Removes and returns the item from the front of the queue
  • peek() - Returns the front item without removing it
  • isEmpty() - Checks if the queue is empty

Properties

  • size - The number of items in the queue

Live Example

Try out the useQueue hook with this interactive example:

Current Queue:

First← Front

Is Empty: No

Front (Peek): First

Queue Operations:

  • • Enqueue: Adds an item to the back of the queue
  • • Dequeue: Removes and returns the item from the front
  • • Peek: Returns the front item without removing it
  • • isEmpty: Checks if the queue is empty

Examples

Basic Queue Operations

const queue = useQueue(['first', 'second']);

// Add items
queue.enqueue('third');          // Queue: ['first', 'second', 'third']
queue.enqueue('fourth');         // Queue: ['first', 'second', 'third', 'fourth']

// Remove items
queue.dequeue();                 // Returns 'first', Queue: ['second', 'third', 'fourth']
queue.dequeue();                 // Returns 'second', Queue: ['third', 'fourth']

// Peek at front
queue.peek();                    // Returns 'third' (doesn't remove it)

Task Queue Example

function TaskQueue() {
  const taskQueue = useQueue([]);
  const [taskInput, setTaskInput] = useState('');

  const addTask = () => {
    if (taskInput.trim()) {
      taskQueue.enqueue({
        id: Date.now(),
        description: taskInput,
        completed: false
      });
      setTaskInput('');
    }
  };

  const processNextTask = () => {
    const task = taskQueue.dequeue();
    if (task) {
      console.log('Processing:', task.description);
    }
  };

  return (
    <div>
      <div>
        <input
          value={taskInput}
          onChange={(e) => setTaskInput(e.target.value)}
          placeholder="Enter a task"
        />
        <button onClick={addTask}>Add Task</button>
      </div>

      <div>
        <button onClick={processNextTask}>Process Next Task</button>
        <p>Queue size: {taskQueue.size}</p>
        <p>Next task: {taskQueue.peek()?.description || 'None'}</p>
      </div>

      <div>
        <h4>All Tasks:</h4>
        {Array.from({ length: taskQueue.size }, (_, i) => {
          // This is a simplified view - in real implementation you'd need to track items
          return <div key={i}>Task {i + 1}</div>;
        })}
      </div>
    </div>
  );
}

Message Queue Example

function MessageQueue() {
  const messageQueue = useQueue([]);
  const [message, setMessage] = useState('');

  const sendMessage = () => {
    if (message.trim()) {
      messageQueue.enqueue({
        id: Date.now(),
        text: message,
        timestamp: new Date().toISOString()
      });
      setMessage('');
    }
  };

  const processMessage = () => {
    const msg = messageQueue.dequeue();
    if (msg) {
      alert(`Processing: ${msg.text}`);
    }
  };

  return (
    <div>
      <div>
        <input
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="Enter a message"
        />
        <button onClick={sendMessage}>Send Message</button>
      </div>

      <div>
        <button onClick={processMessage}>Process Message</button>
        <p>Messages in queue: {messageQueue.size}</p>
        <p>Next message: {messageQueue.peek()?.text || 'None'}</p>
      </div>
    </div>
  );
}

How It Works

The useQueue hook uses JavaScript's Proxy API to intercept method calls on the Queue. When a mutating method (enqueue, dequeue) is called, it triggers a re-render of the component by updating an internal state variable. This ensures that your UI stays in sync with the Queue's state.

Queue Implementation

The Queue is implemented using a linked list structure for efficient enqueue and dequeue operations:

  • Enqueue: O(1) - Adds item to the back
  • Dequeue: O(1) - Removes item from the front
  • Peek: O(1) - Views front item without removal

TypeScript Support

The hook is fully typed and supports generic types: 

const stringQueue = useQueue<string>(['a', 'b', 'c']);
const numberQueue = useQueue<number>([1, 2, 3]);
const objectQueue = useQueue<{id: number, name: string}>([
  { id: 1, name: 'John' }
]);
← Previous: useSet Next: useStack →