Guide · Open source
How to use usehooks: install and use React hooks
Updated · written with AI from the project's own documentation and checked against our catalogue data
usehooks (published on npm as @uidotdev/usehooks) is a collection of reusable React hooks from the ui.dev team. Each hook adds a common behavior to a React component, such as tracking window size, debouncing input or storing values in local storage. This guide shows you how to install the package, check that your project meets the requirements, pick the right hook and know which hooks are marked experimental.
useHooksuidotdev/usehooks · ★ 11.5k · MIT Install options & downloads Quick start
- 1Check your setup. Confirm Node.js and npm are installed and that your React project uses React v18.0.0 or newer.
- 2Install the package. Run npm i @uidotdev/usehooks in your project folder.
- 3Pick a hook. Browse the standard hook list in the README or on usehooks.com and choose one that fits your task.
- 4Import the hook. Import the hook by name from @uidotdev/usehooks in the component file where you need it.
- 5Call the hook in a component. Call the hook at the top level of a React function component and use the values it returns.
- 6Read the hook's docs. Open the hook's page on usehooks.com to confirm its arguments and return values.
- 7Test before production. Run your app and any server-rendered pages to confirm the hooks behave as you expect.
What you need before you install usehooks
You need Node.js and npm, plus a React project running React v18.0.0 or newer. The README states v18.0.0+ as the compatibility floor, so older React versions are not supported.
usehooks is only useful inside React. Every hook is written for React, so it does not help in projects that do not use it.
- Node.js and npm installed
- React v18.0.0 or newer
- A React project where you can add npm packages
Install the standard usehooks package
Run the install command from your project folder. This installs the standard set of hooks, which are the stable ones listed under the Standard section of the README.
npm i @uidotdev/usehooksUse a hook in a React component
Import a hook by name from the package and call it inside a function component, the same way you would call any React hook. The README lists each hook with a link to its own documentation page at usehooks.com, where you can see its details.
For example, useDebounce is listed among the standard hooks and is commonly used to delay reacting to input until the user pauses typing. Check the hook's documentation page for its exact arguments and return values before you rely on them.
- Import the hook you need from @uidotdev/usehooks
- Call it at the top level of a component, not inside loops or conditions
- Read the hook's documentation page at usehooks.com for its parameters
Choose from the available hooks
The standard set includes hooks for browser and app tasks such as useBattery, useClickAway, useCopyToClipboard, useLocalStorage, useSessionStorage, useMediaQuery, useWindowSize, useWindowScroll, useIntersectionObserver, useLockBodyScroll and useGeolocation. It also includes state helpers like useCounter, useList, useMap, useQueue, useSet, useToggle and usePrevious.
The README also lists experimental hooks such as useFetch, useInterval, useKeyPress, useEventListener and useTimeout. These come from a separate install tag.
Install the experimental hooks carefully
The experimental hooks are installed with a different command. This command also installs pre-release versions of React and React DOM, so it changes your whole project, not just the hook package.
The README describes these hooks as experimental. Do not use them in production if your team needs stability, because they may change.
- Experimental hooks require pre-release React packages
- Expect possible changes to experimental hooks
- Keep standard and experimental setups in separate test projects first
npm i @uidotdev/usehooks@experimental react@experimental react-dom@experimentalUse usehooks for server-rendered React
The package describes its hooks as server-safe, which means they are meant to work when React renders on a server. Test your own server-rendered pages before you ship, since the README does not describe how each hook behaves during server rendering in detail.
If you need a hook that depends on browser-only APIs, check its documentation page first and confirm how it behaves before the page loads in the browser.
What people use it for
- Debouncing a search input so a request runs only after the user stops typing with useDebounce
- Saving user preferences in the browser with useLocalStorage
- Tracking window dimensions to adjust a layout with useWindowSize
- Copying text to the clipboard from a button with useCopyToClipboard
- Closing a menu when the user clicks outside it with useClickAway
Frequently asked questions
Is usehooks free to use?
usehooks is published under the MIT licence, as stated in the project information. Check the LICENSE file in the repository for the full terms before you use it in a commercial project.
What React version does usehooks need?
The README says the package is compatible with React v18.0.0 or newer. Older React versions are not supported by the README's stated compatibility.
How do I install usehooks?
Run npm i @uidotdev/usehooks in your project folder. This installs the standard hooks. You need Node.js and npm installed first.
What is the difference between standard and experimental hooks?
Standard hooks install with the normal npm command. Experimental hooks install from a separate @experimental tag and also require pre-release versions of react and react-dom. The README says experimental hooks may change, so they are not for production use if you need stability.
Can I use usehooks without React?
No. Every hook in the package is written for React, so it is not useful in projects that do not use React.
What are the alternatives to usehooks?
The project lists usehooks-ts, react-use, ahooks and react-hanger as comparable projects. Compare their hook lists, React support and documentation before you choose one.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
usehooks suits React developers on v18.0.0 or newer who want a ready-made set of hooks for common browser tasks and a documented reference for how they are written. Skip it if you do not use React, if your project runs an older React version, or if you need experimental hooks in production, since those may change.
Install options & downloads