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 — useObjectState React Hook – useHooks

useHooks

Install:

npm i @uidotdev/usehooks

Description:

The useObjectState hook is useful for managing complex state objects. It provides a convenient way to initialize and update state values using a single hook. By using this hook, you can easily create and maintain state objects with initial values, and then update them through a flexible “handleUpdate” function. This function accepts either a callback function or an object, allowing you to merge new values into the existing state object.

React.gg

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

Learn More

Parameters

NameTypeDescription
initialValueobject(Optional) The initial state value.

Return Value

The useObjectState hook returns an array with the following elements:

IndexTypeDescription
0objectThe current state object.
1functionA function to update the state object.

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.

  • useQueue

    Add, remove, and clear element from a queue data structure with useQueue.

  • useHover

    Track whether an element is being hovered over with useHover.

  • useTimeout

    Create delayed actions or timed events using useTimeout.

  • $100 Monopoly-style moneyReact.gg

    Please give us your money.

  • useEventListener

    Listen for events on a target element with useEventListener.

  • 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.

  • 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 01402520 — 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.