![\"usefy](\"https://raw.githubusercontent.com/mirunamu00/usefy/master/assets/logo.png\"){kind=logo}
\n\n \n
\n A high-performance React hook for throttling values with leading/trailing edge support\n
\n\n\n \n ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-throttle.svg?style=flat-square&color=007acc\")
\n \n \n ![\"npm](\"https://img.shields.io/npm/dm/@usefy/use-throttle.svg?style=flat-square&color=007acc\")
\n \n \n ![\"bundle](\"https://img.shields.io/bundlephobia/minzip/@usefy/use-throttle?style=flat-square&color=007acc\")
![\"license\"](\"https://img.shields.io/npm/l/@usefy/use-throttle.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-throttle` limits value updates to at most once per specified interval, making it perfect for scroll events, resize handlers, mouse movements, and any high-frequency updates that need rate-limiting. Unlike debounce, throttle guarantees regular updates during continuous changes.\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-throttle?\n\n- **Tiny Wrapper** ā Built on [@usefy/use-debounce](https://www.npmjs.com/package/@usefy/use-debounce) (its only runtime dependency); adds ~200B of its own code\n- **TypeScript First** ā Full type safety with generics and exported interfaces\n- **Flexible Options** ā Leading edge and trailing edge support\n- **Guaranteed Updates** ā Regular updates during continuous changes (unlike debounce)\n- **SSR Compatible** ā Works seamlessly with Next.js, Remix, and other SSR frameworks\n- **Lightweight** ā Minimal bundle footprint (~200B minified + gzipped)\n- **Well Tested** ā Comprehensive test coverage with Vitest\n\n### Throttle vs Debounce\n\n| Feature | Throttle | Debounce |\n| -------------------- | -------------------------- | ----------------------------- |\n| First update | Immediate (leading: true) | After delay |\n| During rapid changes | Regular intervals | Waits for pause |\n| Best for | Scroll, resize, mouse move | Search input, form validation |\n\n---\n\n## Installation\n\n```bash\n# npm\nnpm install @usefy/use-throttle\n\n# yarn\nyarn add @usefy/use-throttle\n\n# pnpm\npnpm add @usefy/use-throttle\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### Internal Dependencies\n\nThis package uses [@usefy/use-debounce](https://www.npmjs.com/package/@usefy/use-debounce) internally with `maxWait` set to achieve throttle behavior.\n\n---\n\n## Quick Start\n\n```tsx\nimport { useThrottle } from \"@usefy/use-throttle\";\n\nfunction ScrollTracker() {\n const [scrollY, setScrollY] = useState(0);\n const throttledScrollY = useThrottle(scrollY, 100);\n\n useEffect(() => {\n const handleScroll = () => setScrollY(window.scrollY);\n window.addEventListener(\"scroll\", handleScroll);\n return () => window.removeEventListener(\"scroll\", handleScroll);\n }, []);\n\n returnThrottled: {throttledValue}
\n\n Built with care by the usefy team\n
\n","readmeFilename":"README.md"}