{"id":11902,"library":"react-use","title":"React Use Hooks Collection","description":"react-use is a comprehensive, open-source collection of over 80 essential React Hooks, offering a wide array of utilities for managing state, effects, browser APIs, and sensor data. It aims to simplify common patterns and reduce boilerplate in React applications, providing modular and reusable solutions for tasks such as tracking window size, battery status, geolocation, and various input events. The library is actively maintained, with its current stable version being 17.6.0 (released December 2024), and demonstrates a frequent release cadence, often pushing minor updates and bug fixes multiple times a year. Its key differentiators include the sheer volume and diversity of well-documented hooks, strong TypeScript support, and a focus on abstracting complex browser APIs into simple hook interfaces. It originated as a port from the `libreact` library.","status":"active","version":"17.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/streamich/react-use","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-use","lang":"bash","label":"npm"},{"cmd":"yarn add react-use","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-use","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library is required for all hooks to function.","package":"react","optional":false},{"reason":"Necessary for hooks that interact with the DOM or require React's rendering capabilities.","package":"react-dom","optional":false}],"imports":[{"note":"react-use primarily uses named exports and is designed for ES modules. CommonJS `require` syntax is generally incorrect or may not work as expected in modern bundlers.","wrong":"const { useWindowSize } = require('react-use');","symbol":"useWindowSize","correct":"import { useWindowSize } from 'react-use';"},{"note":"All hooks are named exports; there is no default export from the 'react-use' package. Importing a non-existent default export will result in `undefined`.","wrong":"import useBattery from 'react-use';","symbol":"useBattery","correct":"import { useBattery } from 'react-use';"},{"note":"While `import * as` works, directly importing specific named exports is recommended for better tree-shaking and explicit dependency management.","wrong":"import * as ReactUse from 'react-use'; // then ReactUse.useToggle","symbol":"useToggle","correct":"import { useToggle } from 'react-use';"},{"note":"TypeScript users will benefit from the included type definitions for all hooks, providing strong typing for hook arguments and return values.","symbol":"useStateList","correct":"import { useStateList } from 'react-use';"}],"quickstart":{"code":"import React from 'react';\nimport { useWindowSize, useBattery, useToggle } from 'react-use';\n\nconst App = () => {\n const { width, height } = useWindowSize();\n const batteryState = useBattery();\n const [isVisible, toggleVisibility] = useToggle(true);\n\n return (\n
\n );\n};\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates how to use `useWindowSize` to track browser dimensions, `useBattery` to monitor device battery status, and `useToggle` for simple boolean state management and conditional UI rendering within a React functional component."},"warnings":[{"fix":"Upgrade `react-use` to version 17.3.3 or higher. This version includes a fix that resolves compatibility issues with `@types/react` v18.","message":"When upgrading your project's `@types/react` to v18 (or newer), you may encounter TypeScript compilation errors related to `React.FC` (FunctionComponent) type arguments. Specifically, `React.FC` no longer accepts a generic type parameter in `@types/react` v18.","severity":"breaking","affected_versions":"<17.3.3"},{"fix":"For hooks with potential SSR issues, consider providing a `defaultState` if the hook supports it, or conditionally rendering components that use these hooks only on the client-side (e.g., using `typeof window !== 'undefined'`). Upgrade to `react-use` v17.3.2+ for specific `useMedia` SSR fixes.","message":"Hooks relying on browser-specific APIs (e.g., `useMedia`, `useWindowSize`, `useGeolocation`) can cause hydration mismatches or errors when used in Server-Side Rendering (SSR) environments if their initial state is not handled correctly or doesn't match the client-side render.","severity":"gotcha","affected_versions":"prior to 17.3.2 (fixed for `useMedia` specifically)"},{"fix":"Ensure your project's `react` and `react-dom` versions (e.g., `^17.0.0` or `^18.0.0`) are compatible with the `react-use` peer dependency range defined in `package.json`. Use `npm ls react` and `npm ls react-dom` to inspect installed versions.","message":"Incorrectly resolved `react` and `react-dom` peer dependencies can lead to runtime errors or multiple instances of React, causing unpredictable behavior. This can occur if your project's React version doesn't satisfy `react-use`'s peer dependency range.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure all calls to `use*` functions adhere to the Rules of Hooks by being placed at the top level of React function components or custom hooks.","cause":"Attempting to call a `react-use` hook outside of a React functional component or a custom hook, violating the Rules of Hooks.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Always use ES module named import syntax: `import { useSomeHook } from 'react-use';`. Verify your build configuration supports ES modules correctly.","cause":"This error typically occurs when attempting to import hooks using CommonJS `require()` syntax or an incorrect named import in an environment expecting ES modules, or if tree-shaking removed the export unexpectedly.","error":"TypeError: (0, react_use__WEBPACK_IMPORTED_MODULE_2__.useSomeHook) is not a function"},{"fix":"Upgrade `react-use` to version 17.3.3 or newer to get the necessary type definition updates compatible with `@types/react` v18.","cause":"This TypeScript error indicates a compatibility issue between an older version of `react-use` and `@types/react` v18 or newer, where the generic type argument for `React.FC` was deprecated.","error":"Type 'FC' is not assignable to type 'FunctionComponent'"}],"ecosystem":"npm"}