GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • All hooks
  • View the Repo
  • JavaScript Newsletter
  • React Newsletter
  • Learn React
  • Learn React Query

This view

  • Original page
  • New address

GeezerVison is showing usehooks.com — useQueue React Hook – useHooks

useHooks

Install:

npm i @uidotdev/usehooks

Description:

The useQueue hook is a useful tool for managing a queue of elements within a functional component. It allows you to easily add, remove, and clear elements from the queue while maintaining the necessary state updates. The hook returns an object that includes the functions for manipulating the queue (add, remove, and clear), as well as additional properties such as first, last, size, and queue.

React.gg

Want to learn how to build useQueue yourself? Check out react.gg – the interactive way to master modern React.

Learn More

Parameters

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

Return Value

The useQueue hook returns an object with the following properties and methods:

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.

Demo:

Example:

More Hooks:

Sort:
  • 20-sided dieReact.gg

    It’s dangerous to go alone! Master React by learning how to build useHooks yourself.

  • useDebounce

    Delay the execution of function or state update with useDebounce.

  • useLocalStorage

    Store, retrieve, and synchronize data from the browser’s localStorage API with useLocalStorage

  • useWindowSize

    Track the dimensions of the browser window with useWindowSize.

  • usePrevious

    Track the previous value of a variable with usePrevious.

  • useIntersectionObserver

    Track and manage the visibility of your DOM elements within the viewport with useIntersectionObserver.

  • useNetworkState

    Monitor and adapt to network conditions seamlessly with useNetworkState.

  • useMediaQuery

    Subscribe and respond to media query changes with useMediaQuery.

  • useOrientation

    Manage and respond to changes in device orientation with useOrientation.

  • useSessionStorage

    Store, retrieve, and synchronize data from the browser’s session storage with useSessionStorage.

  • usePreferredLanguage

    Adapt to user language preferences dynamically with usePreferredLanguage.

  • useFetch

    Fetch data with accurate states, caching, and no stale responses using useFetch.

  • useContinuousRetry

    Automates retries of a callback function until it succeeds with useContinuousRetry

  • useVisibilityChange

    Track document visibility and respond to changes with useVisibilityChange.

  • board game spinner and all options are ReactReact.gg

    There’s no better way to learn useHooks than by building it yourself.

  • useScript

    Load and manage external JavaScript scripts with useScript.

  • useRenderInfo

    Debug renders and improve performance with useRenderInfo.

  • useRenderCount

    Identify unnecessary re-renders and monitor update frequency with useRenderCount.

  • useRandomInterval

    Execute a callback function at a random interval with useRandomInterval.

  • useIntervalWhen

    Create dynamic timers that can be started, paused, or resumed with useIntervalWhen.

  • useInterval

    Schedule periodic actions like data polling or animations with useInterval.

  • useLockBodyScroll

    Temporarily disable scrolling on the document body with useLockBodyScroll.

  • useCountdown

    Create countdown timers using useCountdown.

  • useIsClient

    Determine whether the code is running on the client-side or server-side with useIsClient.

  • useHover

    Track whether an element is being hovered over with useHover.

  • useTimeout

    Create delayed actions or timed events using useTimeout.

  • useEventListener

    Listen for events on a target element with useEventListener.

  • $100 Monopoly-style moneyReact.gg

    Please give us your money.

  • useKeyPress

    Detect and perform actions on key press events with useKeyPress.

  • useMap

    Synchronize and update state based on the Map data structure with useMap.

  • useThrottle

    Throttle computationally expensive operations with useThrottle.

  • useSet

    Synchronize and update state based on the Set data structure with useSet.

  • useCopyToClipboard

    Copy text to the clipboard using useCopyToClipboard.

  • useBattery

    Track the battery status of a user’s device with useBattery.

  • useIdle

    Detect user inactivity with useIdle.

  • useToggle

    A hook to toggle a boolean value with useToggle.

  • useHistoryState

    Add undo / redo functionality with useHistoryState.

  • useGeolocation

    Access and monitor a user's geolocation (after they give permission) with useGeolocation.

  • usePageLeave

    Track when a user navigates away from a webpage with usePageLeave.

  • useObjectState

    Manage complex state objects with useObjectState.

  • travel-style postcard from React that says “Enjoy the views!React.gg

    The all new interactive way to master modern React (for fun and profit).

  • useLogger

    Debug lifecycle events with useLogger.

  • useDocumentTitle

    Dynamically update the title of a webpage with useDocumentTitle.

  • useIsFirstRender

    Differentiate between the first and subsequent renders with useIsFirstRender.

  • useLongPress

    Enable precise control of long-press interactions for both touch and mouse events with useLongPress.

  • useFavicon

    Dynamically update the favicon with useFavicon.

  • useDefault

    Manage state with default values using useDefault.

  • useWindowScroll

    Track and manipulate the scroll position of a web page with useWindowScroll.

  • useMeasure

    Effortlessly measure and track your component’s dimensions with useMeasure.

  • useClickAway

    Detect clicks outside of specific component with useClickAway.

  • useList

    Manage and manipulate lists with useList.

  • useCounter

    Manage a counter value with minimum and maximum limits with useCounter.

  • useMouse

    Track and retrieve the position of the mouse cursor with useMouse.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.