Universal debounce hook for React
Universal useDebounce hook which can be used for any debounced action. Only
the last provided callback will be executed after a given timeout.
Installation
Install with yarn
yarn add react-debouncedInstall with npm
npm install react-debouncedExample usage
Import the hook first
import useDebounce from 'react-debounced';Use it in your functional components:
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 (
<>
<p>Value: {value}</p>
<p>Debounced: {debounced}</p>
<input placeholder="Fill me out" value={value} onChange={handleInput} />
</>
);
};Options
useDebounce has only one optional parameter timeout, which is set to 250ms per default.
Example with a 100 milliseconds timeout
const debounce = useDebounce(100);Multiple debounce in one component
Each call of useDebounce inside a component will return a debounce function with its own timeout.
If you need to debounce multiple input fields, just use:
const debounceOne = useDebounce();
const debounceTwo = useDebounce();