Docs
Queue

Queue

Add, remove, and clear element from a queue data structure

About

The useQueue hook manages a queue of elements within a functional component. It allows easy addition, removal, and clearing of elements from the queue while maintaining state updates. The hook returns an object that includes functions for manipulating the queue (add, remove, and clear), as well as properties like first, last, size, and queue.

Parameters

NameTypeDescription
initialValuearray(Optional) The initial value for the queue. Default is an empty array.

Return Values

NameTypeDescription
addfunctionAdds an element to the end of the queue.
removefunctionRemoves and returns the first element from the queue.
clearfunctionClears the queue, removing all elements.
firstanyThe first element in the queue.
lastanyThe last element in the queue.
sizenumberThe number of elements in the queue.
queuearrayThe current array representing the queue.

Installation

Run the following command:

npx scriptkavi-hooks@latest add queue

Usage

import { useQueue } from "@/hooks/queue"
import * as React from "react"
 
function QueueDemo({ first, last, size, queue }) {
  return (
    <figure>
      <article>
        <p>Front</p>
        <ul>
          {queue.map((item, i) => {
            const isFirst = first === item
            const isLast = last === item
            if (isFirst) {
              return <li key={i}>First: {item}</li>
            }
            if (isLast) {
              return <li key={i}>Last: {item}</li>
            }
            return <li key={i}>Item: {item}</li>
          })}
        </ul>
        <p>Back</p>
      </article>
      <figcaption>{size} items in the queue</figcaption>
    </figure>
  )
}
 
export default function App() {
  const { add, remove, clear, first, last, size, queue } = useQueue([1, 2, 3])
 
  return (
    <div>
      <header>
        <h1>UseQueue</h1>
        <button className="link" onClick={() => add((last || 0) + 1)}>
          Add
        </button>
        <button disabled={size === 0} className="link" onClick={() => remove()}>
          Remove
        </button>
        <button disabled={size === 0} className="link" onClick={() => clear()}>
          Clear
        </button>
      </header>
      <QueueDemo queue={queue} size={size} first={first} last={last} />
    </div>
  )
}
PreviousRender Count