{"id":12326,"library":"usehooks-ts","title":"usehooks-ts","description":"usehooks-ts is a comprehensive, TypeScript-first React hook library designed to accelerate application development by providing a collection of ready-to-use, well-tested custom hooks. As of its current stable version, 3.1.1, the library maintains an active development pace with frequent patch and minor releases, alongside significant major updates like the recent v3.0.0. Key differentiators include its strict adherence to TypeScript, ensuring type safety and improved developer experience, and its focus on being fully tree-shakable (utilizing ES Modules since v3) to minimize bundle size. It aims to embody DRY principles, offering solutions for common React patterns such as state management, DOM manipulation, event handling, and more, making it a robust choice for modern React projects.","status":"active","version":"3.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/juliencrn/usehooks-ts","tags":["javascript","typescript","react","hooks"],"install":[{"cmd":"npm install usehooks-ts","lang":"bash","label":"npm"},{"cmd":"yarn add usehooks-ts","lang":"bash","label":"yarn"},{"cmd":"pnpm add usehooks-ts","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for all React applications using hooks.","package":"react","optional":false}],"imports":[{"note":"The library transitioned to ES Modules in v3.0.0, making CommonJS require statements incorrect.","wrong":"const useLocalStorage = require('usehooks-ts').useLocalStorage","symbol":"useLocalStorage","correct":"import { useLocalStorage } from 'usehooks-ts'"},{"note":"All hooks are named exports from the main package entry point.","wrong":"import useBoolean from 'usehooks-ts/useBoolean'","symbol":"useBoolean","correct":"import { useBoolean } from 'usehooks-ts'"},{"note":"While star imports work, it's generally recommended to import only the specific hooks you need for optimal tree-shaking.","wrong":"import * as usehooks from 'usehooks-ts'","symbol":"useDocumentTitle","correct":"import { useDocumentTitle } from 'usehooks-ts'"}],"quickstart":{"code":"import React from 'react';\nimport { useLocalStorage } from 'usehooks-ts';\n\nfunction MyComponent() {\n  // Initialize a piece of state in localStorage with a default value of 0\n  const [count, setCount] = useLocalStorage('my-counter-key', 0);\n\n  const increment = () => setCount(prev => prev + 1);\n  const decrement = () => setCount(prev => prev - 1);\n  const reset = () => setCount(0);\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={increment}>Increment</button>\n      <button onClick={decrement}>Decrement</button>\n      <button onClick={reset}>Reset</button>\n    </div>\n  );\n}\n\nexport default MyComponent;","lang":"typescript","description":"Demonstrates the basic usage of `useLocalStorage` to persist and manage a counter across browser sessions."},"warnings":[{"fix":"Migrate all `require()` statements to `import { HookName } from 'usehooks-ts'` syntax.","message":"Version 3.0.0 of `usehooks-ts` moved its entire workspace to ES Modules. This means direct CommonJS `require()` statements will no longer work, requiring projects to update their import syntax to ES Module standards.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Review release notes for v3.0.0 and update code to use recommended alternatives (e.g., `useScrollLock` instead of `useLockedBody`) or implement custom solutions.","message":"In version 3.0.0, several previously deprecated hooks and their signatures were completely removed. Projects upgrading from versions prior to 3.0.0 might encounter runtime errors if these hooks are still in use.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Adjust TypeScript code to align with the new type definitions. Consult the `usehooks-ts` documentation or source for updated type names and structures.","message":"Version 3.0.0 introduced changes preferring `type` over `interface` for some internal types and renamed or made private certain type aliases. This may cause TypeScript compilation errors in applications that directly reference or extend `usehooks-ts` internal types.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Consult the official `usehooks-ts` documentation for recommended modern alternatives and migrate your codebase accordingly to avoid future breaking changes.","message":"Several hooks have been deprecated in recent minor versions, with some replaced by new alternatives. For example, `useLockedBody` was replaced by `useScrollLock` (v2.15.0), and `useFetch`, `useEffectOnce`, `useIsFirstRender`, and `useUpdateEffect` were deprecated in v2.14.0.","severity":"deprecated","affected_versions":">=2.13.0"},{"fix":"Upgrade to `usehooks-ts@3.1.1` or later to ensure full `peerDependencies` compatibility with React 19. For older versions, ensure your React version is within the specified peer dependency range.","message":"While version 3.1.1 officially adds React 19 to its `peerDependencies`, users on older versions of `usehooks-ts` might encounter peer dependency warnings or potential compatibility issues when using React 19.","severity":"gotcha","affected_versions":"<3.1.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Update your import statements to use ES Module syntax: `import { HookName } from 'usehooks-ts'`.","cause":"Attempting to import `usehooks-ts` modules using CommonJS `require()` syntax after the library migrated to ES Modules in v3.0.0.","error":"TypeError: require is not a function"},{"fix":"Refer to the `usehooks-ts` documentation to identify the recommended replacement hook (e.g., `useScrollLock` for `useLockedBody`) or implement the desired functionality manually.","cause":"Trying to use a hook that was explicitly removed in `usehooks-ts` v3.0.0 or a later version after being deprecated.","error":"Property 'useDeprecatedHookName' does not exist on type 'typeof import(\"usehooks-ts\")'."},{"fix":"Carefully review the type signature of the hook you are using in the `usehooks-ts` documentation. Ensure the values and types you are passing as arguments exactly match the expected types.","cause":"This usually indicates a type mismatch in arguments passed to hooks, often exacerbated by the library's TypeScript-first approach and strict typing, or changes to internal type aliases in v3.0.0.","error":"Type 'MyComponentProps' is not assignable to type 'HookParameterType'. Argument of type 'string' is not assignable to parameter of type 'number'."}],"ecosystem":"npm"}