š Small (~0.2kb) debounce effect hook for React with TypeScript support
npm install use-debouncyš Small (~0.2kb) debounce effect hook for React with TypeScript support
!GitHub
!npm bundle size
!npm
!types
- š No dependencies.
- šļøā Tiny. ~0.2kb.
- š¦¾ Performance. Used by requestAnimationFrame.
- š Types. Support TypeScript.
- š£ Easy. Use like React effect or function.
#### NPM
``sh`
npm install use-debouncy
#### Yarn
`sh`
yarn add use-debouncy
`tsx
import React, { useState } from 'react';
import { useDebouncyEffect } from 'use-debouncy';
const App = () => {
const [value, setValue] = useState('');
useDebouncyEffect(
() => fetchData(value), // function debounce
400, // number of milliseconds to delay
[value], // array values that the debounce depends (like as useEffect)
);
return setValue(event.target.value)} />;
};
`
`tsx
import React, { useState } from 'react';
import { useDebouncyFn } from 'use-debouncy';
const App = () => {
const handleChange = useDebouncyFn(
(event) => fetchData(event.target.value), // function debounce
400, // number of milliseconds to delay
);
return ;
};
`
`typescript`
function useDebouncyEffect(fn: () => void, wait?: number, deps?: any[]): void;
| Prop | Required | Default | Description |
| ---- | -------- | ------- | ----------------------------------------------------------- |
| fn | ā | | Debounce callback. |
| wait | | 0 | Number of milliseconds to delay. |[]
| deps | | | Array values that the debounce depends (like as useEffect). |
`typescript`
function useDebouncyFn(fn: (...args: any[]) => void, wait?: number): (...args: any[]) => void;
| Prop | Required | Default | Description |
| ---- | -------- | ------- | -------------------------------- |
| fn | ā | | Debounce handler. |
| wait | | 0 | Number of milliseconds to delay. |
This project uses modern testing approach with Playwright component tests:
`bashRun all tests (Playwright component tests)
yarn test
$3
The project has comprehensive test coverage including:
- Core functionality tests - Basic debouncing behavior
- Effect hook tests -
scenarios
- Function hook tests - useDebouncyFn` scenariosAll tests run across multiple browsers (Chromium, Firefox, WebKit) to ensure cross-browser compatibility.
