Published on

useQueue Hook React

useQueue Hook React

useQueue Hook React

useQueue Code and Usage

useQueue is a hook to manage a queue of items.

import { useState } from "react";

const useQueue = (initialItems = []) => {
  const [items, setItems] = useState(initialItems);

  const enqueue = (item) => {
    setItems((prevItems) => [...prevItems, item]);
  };

  const dequeue = () => {
    setItems((prevItems) => prevItems.slice(1));
  };

  return {
    items,
    enqueue,
    dequeue,
  };
};

// Usage
const QueueExample = () => {
  const { items, enqueue, dequeue } = useQueue(["item1", "item2"]);

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={() => enqueue("new item")}>Enqueue</button>
      <button onClick={dequeue}>Dequeue</button>
    </div>
  );
};