{"id":15255,"library":"use-debounce","title":"React Debounce Hooks (use-debounce)","description":"use-debounce is a React library providing versatile hooks for debouncing values and callbacks, currently at version 10.1.1. The package maintains an active release cadence with frequent patch and minor updates. Its key differentiators include a minimal bundle size (under 1KB), compatibility with established debouncing implementations (like those in Lodash or Underscore), and robust server-rendering support. It offers the `useDebounce` hook for delaying updates to React state values and the `useDebouncedCallback` hook for throttling function executions, suitable for various interactive scenarios such as input field handling, API request optimization, and event listener management. Since version 10, server-side debouncing is opt-in via the `debounceOnServer` option, preventing unnecessary CPU utilization during SSR.","status":"active","version":"10.1.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/xnimorz/use-debounce","tags":["javascript","debounce","react-hook","react","typescript"],"install":[{"cmd":"npm install use-debounce","lang":"bash","label":"npm"},{"cmd":"yarn add use-debounce","lang":"bash","label":"yarn"},{"cmd":"pnpm add use-debounce","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false}],"imports":[{"note":"This library is ESM-first since v9. Named imports are required. For CommonJS, explicitly destructure named exports.","wrong":"import useDebounce from 'use-debounce';\nconst useDebounce = require('use-debounce');","symbol":"useDebounce","correct":"import { useDebounce } from 'use-debounce';"},{"note":"As a named export, ensure you use destructuring for CommonJS or named import syntax for ESM.","wrong":"const debouncedCallback = require('use-debounce').useDebouncedCallback;\nimport * as useDebounce from 'use-debounce';","symbol":"useDebouncedCallback","correct":"import { useDebouncedCallback } from 'use-debounce';"},{"note":"Type import for configuring debounce behavior.","symbol":"DebounceOptions","correct":"import type { DebounceOptions } from 'use-debounce';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { useDebounce } from 'use-debounce';\n\nexport default function InputExample() {\n const [text, setText] = useState('Hello');\n // Debounce the 'text' value with a 1000ms delay\n const [debouncedValue] = useDebounce(text, 1000);\n\n return (\n
\n

Debounced Input Example

\n {\n setText(e.target.value);\n }}\n style={{ padding: '8px', fontSize: '16px' }}\n />\n

Actual value: {text}

\n

Debounced value: {debouncedValue}

\n

\n The 'Debounced value' updates 1 second after you stop typing.\n

\n
\n );\n}","lang":"typescript","description":"Demonstrates how to debounce a React state value using the `useDebounce` hook, updating a displayed value only after a specified delay."},"warnings":[{"fix":"Update bundler configurations or import paths to reference `use-debounce` directly, or specify `.mjs` if targeting a specific module type.","message":"In v10.0.0, the ESM build output path was changed from `index.modern.js` to `index.mjs`. Projects directly referencing internal module paths in their build pipelines may require adjustment.","severity":"breaking","affected_versions":">=10.0.0"},{"fix":"Pass `{ debounceOnServer: true }` in the options object to `useDebounce` or `useDebouncedCallback` if server-side debouncing is required.","message":"The v10.0.0 release introduced the `debounceOnServer` option, which defaults to `false`. This means debounced callbacks no longer execute on the server by default. If your application relies on server-side debouncing, you must explicitly set `debounceOnServer: true`.","severity":"breaking","affected_versions":">=10.0.0"},{"fix":"Ensure your build system or direct `require` statements correctly resolve to the `use-debounce` package root, letting Node.js resolve the correct entry point (preferred), or update explicit paths to `dist/index.cjs` if necessary.","message":"Version 9.0.0 changed the CommonJS entry point path from `dist/index.js` to `dist/index.cjs`. This impacts projects using `require()` or build tools configured for the old path.","severity":"breaking","affected_versions":">=9.0.0 <10.0.0"},{"fix":"Upgrade to v10.0.4 or newer to resolve strict mode inconsistencies.","message":"Prior to v10.0.4, `useDebounce` and `useDebouncedCallback` exhibited incorrect behavior when both `leading` and `trailing` options were set to `true` specifically within React Strict Mode.","severity":"gotcha","affected_versions":">=10.0.0 <10.0.4"},{"fix":"Update to v10.0.5 or a later version to ensure correct `isPending` state management.","message":"Earlier versions (prior to v10.0.5) had a bug where the `isPending` state might not reset correctly if the tracked value for `useDebounce` had not changed, leading to potentially stale UI indications.","severity":"gotcha","affected_versions":">=10.0.0 <10.0.5"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Use ES module `import` syntax: `import { useDebounce } from 'use-debounce';`","cause":"Attempting to use CommonJS `require()` syntax in an ES Module context after `use-debounce` moved to module support in v9.0.0.","error":"ReferenceError: require is not defined in ES module scope"},{"fix":"Update your import paths to `use-debounce` (preferred for modern bundlers) or `use-debounce/dist/index.cjs` if explicitly targeting CommonJS.","cause":"Your build configuration or explicit import path is still referencing the old CommonJS entry point (`dist/index.js`) after it changed to `dist/index.cjs` in v9.0.0.","error":"Module not found: Error: Can't resolve 'use-debounce/dist/index.js'"},{"fix":"Ensure `useDebounce` is imported as a named export: `import { useDebounce } from 'use-debounce';`","cause":"Incorrectly importing `useDebounce` as a default import when it is a named export, or misconfiguring a CommonJS import in a build environment expecting ESM.","error":"TypeError: (0 , _useDebounce.useDebounce) is not a function"}],"ecosystem":"npm"}