Convenient React useDebounce and useThrottle hooks for a clean code.
npm install throttle-hooks
* Installation
* Usage
+ Throttling
+ Debouncing
* Further reading
* License
npm i throttle-hooks
Package contains 2 hooks:
* useThrottle
* useDebounce
useThrottle() accepts 3 optional arguments:
* wait - number in miliseconds. Default is 400
* leading - boolean. Default is false
* trailing - boolean. Default is false
useThrottle(wait, leading, trailing) returns function setter, which you can use anywhere in your component.
``js
import { useThrottle } from 'throttle-hooks';
const throttle = useThrottle(400, true, false);
// With arrow function
throttle(() => {
// Express yourself...
});
// Or by invoking named function
throttle(expressYourself);
// You can also submit custom scope and arguments
throttle(expressYourself, scope, args);
`
You can use as many useThrottle hooks as you like. Each hook is independent.
#### Component example:
`js
import { useState } from 'react';
import { useThrottle } from 'throttle-hooks';
export default function SomePage() {
const [numClicks, setNumClicks] = useState(0);
const throttle = useThrottle(1000);
const handleClick = () => {
const updatedClicks = numClicks + 1;
setNumClicks(updatedClicks);
throttle(() => {
console.log('Recevied:', updatedClicks, 'clicks');
});
}
return (
You clicked: { numClicks } times.
$3
accepts 2 optional arguments:
* wait - number in miliseconds. Default is 400
* leading - boolean. Default is returns function setter, which you can use anywhere in your component.
`js
import { useDebounce } from 'throttle-hooks';const debounce = useDebounce(400, true);
// With arrow function
debounce(() => {
// Express yourself...
});
// Or by invoking named function
debounce(expressYourself);
// You can also submit custom scope and arguments
debounce(expressYourself, scope, args);
`You can use as many
hooks as you like. Each hook is independent.#### Component example:
`js
import { useState } from 'react';
import { useDebounce } from 'throttle-hooks';export default function SomePage() {
const [numClicks, setNumClicks] = useState(0);
const debounce = useDebounce(1000);
const handleClick = () => {
const updatedClicks = numClicks + 1;
setNumClicks(updatedClicks);
debounce(() => {
console.log('Recevied:', updatedClicks, 'clicks');
});
}
return (
Hello!
You clicked: { numClicks } times.
)
}
``* Difference between throttle and debounce
* Debounce from the term author