Skip to content

useHooks

A set of ready-made React hooks for common UI and browser tasks, built to be safe on the server.

Stars
11.5k
Forks
588
Licence
MIT
Language
MDX
Last update
1.5 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

useHooks is an npm package of reusable React hooks, small functions that add common behavior to React components, such as tracking window size, debouncing input, or storing values in local storage. It is published by the ui.dev team and is described as server-safe, meaning its hooks are meant to work when React renders on a server. Developers use it to avoid writing these common pieces from scratch.

  • Track window size or scroll position with useWindowSize or useWindowScroll
  • Debounce or throttle user input with useDebounce or useThrottle
  • Save and read values in browser storage with useLocalStorage or useSessionStorage
  • Detect clicks outside a element with useClickAway or visibility changes with useVisibilityChange
  • Lock page scrolling while a modal is open with useLockBodyScroll

Great for

  • React developers who want ready-made hooks for common browser tasks
  • Teams building apps with React v18.0.0 or newer
  • Developers who want to learn from a documented set of hook implementations
  • Projects that need server-safe hooks for server-rendered React

Not ideal for

  • Developers not using React, since every hook is written for React
  • Projects on React versions older than v18.0.0, which the README says is the compatibility floor
  • Teams that need the experimental hooks in production, since they are installed from a separate experimental tag and may change
Step-by-step guide: how to use useHooksInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js and npm · React v18.0.0 or newer

    Install the standard hooks

    npm i @uidotdev/usehooks

    Install the experimental hooks (pre-release React)

    npm i @uidotdev/usehooks@experimental react@experimental react-dom@experimental
  2. 2

    Run it

    • Install the package with npm i @uidotdev/usehooks
    • Import a hook, for example useWindowSize, from @uidotdev/usehooks
    • Call the hook inside a React function component
    • Check the hook's page on usehooks.com for its exact arguments and return values
  3. 3

    Get the most out of it

    • Browse the per-hook pages on usehooks.com for usage examples and options
    • Use useLocalStorage or useSessionStorage to persist simple UI state between visits
    • Combine useDebounce with search inputs to limit how often requests fire
    • Read the source of hooks you use to understand how they work

Downloads

Strengths

  • Covers many common browser and UI needs in one package
  • Documented hook by hook on the project website
  • Explicitly designed to be server-safe and is MIT licensed

Trade-offs

  • The README is short and does not explain each hook's API, so details are on the linked per-hook pages
  • Experimental hooks require installing pre-release versions of React, which adds risk
  • Maintenance activity is not fully clear from the README alone; the last push date is May 2025

How it compares

ProjectStarsTypeLevelUpdatedBest for
usehooks (this)11.5kLibrarybeginner1.5 years agoReact developers who want ready-made hooks for common browser tasks
swr32.5kLibraryintermediate20 days agoReact developers who fetch data from APIs in components
NotionNext11.9kAppintermediate4 days agoWriters who already keep their posts in Notion and want a website without moving content
zustand58.9kLibrarybeginner15 days agoReact developers who want simpler shared state than Redux
react-hook-form44.9kLibraryintermediate5 days agoReact developers building forms with several fields
table28.5kLibraryintermediate15 days agoDevelopers building custom data tables in React, Vue, Solid, Svelte or another supported framework

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.