react hooks
useDebounce react hook
Install it with yarn:
yarn add @tianrang-sz/react-hooks
Or with npm:
npm i @tianrang-sz/react-hooks --save
simple demo
import { useDebounce } from '@tianrang-sz/react-hooks';
function Input({ defaultValue }) {
const [value, setValue] = useState(defaultValue);
// Debounce callback
const [debouncedCallback] = useDebounce(
// function
value => {
setValue(value);
},
// delay in ms
1000
);
// you should use `e => debouncedCallback(e.target.value)` as react works with synthetic evens
return (
<div>
<input
defaultValue={defaultValue}
onChange={e => debouncedCallback(e.target.value)}
/>
<p>Debounced value: {value}</p>
</div>
);
}