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.
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.
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 (
<div>
<h1>Hello!</h1>
<p>You clicked: { numClicks } times.</p>
<button onClick={ handleClick }>
Click
</button>
</div>
)
}
useDebounce()
accepts 2 optional arguments:
- wait - number in miliseconds. Default is
400
- leading - boolean. Default is
false
useDebounce(wait, leading)
returns function setter, which you can use anywhere in your component.
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 useDebounce
hooks as you like. Each hook is independent.
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 (
<div>
<h1>Hello!</h1>
<p>You clicked: { numClicks } times.</p>
<button onClick={ handleClick }>
Click
</button>
</div>
)
}
Copyright 2021-present Mark Khramko