![\"usefy](\"https://raw.githubusercontent.com/mirunamu00/usefy/master/assets/logo.png\"){kind=logo}
\n\n \n
\n A feature-rich React hook for debouncing values with leading/trailing edge and maxWait support\n
\n\n\n \n ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-debounce.svg?style=flat-square&color=007acc\")
\n \n \n ![\"npm](\"https://img.shields.io/npm/dm/@usefy/use-debounce.svg?style=flat-square&color=007acc\")
\n \n \n ![\"bundle](\"https://img.shields.io/bundlephobia/minzip/@usefy/use-debounce?style=flat-square&color=007acc\")
![\"license\"](\"https://img.shields.io/npm/l/@usefy/use-debounce.svg?style=flat-square&color=007acc\")
\n \n
\n Installation ā¢\n Quick Start ā¢\n API Reference ā¢\n Examples ā¢\n License\n
\n\n\n \n š View Storybook Demo\n \n
\n\n---\n\n## Overview\n\n`@usefy/use-debounce` is a powerful React hook for debouncing values with advanced options like leading edge, trailing edge, and maximum wait time. Perfect for search inputs, form validation, API calls, and any scenario where you need to limit the rate of value updates.\n\n**Part of the [@usefy](https://www.npmjs.com/org/usefy) ecosystem** ā a collection of production-ready React hooks designed for modern applications.\n\n### Why use-debounce?\n\n- **Zero Dependencies** ā Pure React implementation with no external dependencies\n- **TypeScript First** ā Full type safety with generics and exported interfaces\n- **Flexible Options** ā Leading edge, trailing edge, and maxWait support\n- **SSR Compatible** ā Works seamlessly with Next.js, Remix, and other SSR frameworks\n- **Lightweight** ā Minimal bundle footprint (~400B minified + gzipped)\n- **Well Tested** ā Comprehensive test coverage with Vitest\n\n---\n\n## Installation\n\n```bash\n# npm\nnpm install @usefy/use-debounce\n\n# yarn\nyarn add @usefy/use-debounce\n\n# pnpm\npnpm add @usefy/use-debounce\n```\n\n### Peer Dependencies\n\nThis package requires React 18 or 19:\n\n```json\n{\n \"peerDependencies\": {\n \"react\": \"^18.0.0 || ^19.0.0\"\n }\n}\n```\n\n---\n\n## Quick Start\n\n```tsx\nimport { useDebounce } from \"@usefy/use-debounce\";\n\nfunction SearchInput() {\n const [query, setQuery] = useState(\"\");\n const debouncedQuery = useDebounce(query, 300);\n\n useEffect(() => {\n if (debouncedQuery) {\n searchAPI(debouncedQuery);\n }\n }, [debouncedQuery]);\n\n return (\n\n Built with care by the usefy team\n
\n","readmeFilename":"README.md"}