Universal debounce hook for react
npm install react-debounced!CI
Universal useDebounce hook which can be used for any debounced action. Only
the last provided callback will be executed after a given timeout.
Install with yarn
``bash`
yarn add react-debounced
Install with npm
`bash`
npm install react-debounced
Import the hook first
`typescript`
import useDebounce from 'react-debounced';
Use it in your functional components:
`typescript jsx
const Test = () => {
const debounce = useDebounce();
const [value, setValue] = useState('');
const [debounced, setDebounced] = useState('');
const handleInput = (e) => {
const { value } = e.target;
setValue(value);
debounce(() => {
// any functionality, like triggering api calls or setting a state, can be used here
console.log('Debounced');
setDebounced(value);
});
};
return (
<>
Value: {value}
Debounced: {debounced}
$3
has only one optional parameter timeout, which is set to 250ms per default.#### Example with a 100 milliseconds timeout
`typescript jsx
const debounce = useDebounce(100);
`$3
Each call of
inside a component will return a debounce function with its own timeout.
If you need to debounce multiple input fields, just use:`typescript jsx
const debounceOne = useDebounce();
const debounceTwo = useDebounce();
``