eavamuseDebouncy
🌀 Small (~0.2kb) debounce effect hook for React with TypeScript support
Features
- 👌 No dependencies.
- 🏋️ Tiny. ~0.2kb.
- 🦾 Performance. Used by requestAnimationFrame.
- 📖 Types. Support TypeScript.
- 🎣 Easy. Use like React effect or function.
Installation
NPM
npm install use-debouncy
Yarn
yarn add use-debouncy
Usage
Demo codesandbox
Use as effect hook
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 <input value={value} onChange={(event) => setValue(event.target.value)} />;
};
Use as callback function
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 <input value={value} onChange={handleChange} />;
};
API Reference
useDebouncy/effect
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). |
useDebouncy/fn
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. |
Development & Testing
This project uses modern testing approach with Playwright component tests:
Commands
# Run all tests (Playwright component tests)
yarn test
# Run tests with UI mode for debugging
yarn test --ui
# Run linting
yarn lint
# Build the project
yarn build
Test Coverage
The project has comprehensive test coverage including:
- Core functionality tests - Basic debouncing behavior
- Effect hook tests -
useDebouncyEffectscenarios - Function hook tests -
useDebouncyFnscenarios - Integration tests - Real-world usage patterns
- Performance tests - Edge cases and performance validation
- E2E tests - Full application integration with API calls
All tests run across multiple browsers (Chromium, Firefox, WebKit) to ensure cross-browser compatibility.
License
