useDebouncy
🌀 Small (~0.2kb) debounce effect hook for React with TypeScript support
Features
- 👌 No dependencies.
- 🏋️ Tiny. ~0.2kb. Size Limit controls the size.
- 🦾 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
Import bit component
Check bit component here
bit import eavam.use-debouncy/use-debounce
Usage
Demo codesandbox
Use as effect hook
import React, { useState } from 'react';
import useDebouncy from 'use-debouncy/effect'; // <== importing from effect
const App = () => {
const [value, setValue] = useState('');
useDebouncy(
() => 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 useDebouncy from 'use-debouncy/fn'; // <== importing from fn
const App = () => {
const handleChange = useDebouncy(
(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. |
License