How to use @rooks/use-debounce - 2 common examples
To help you get started, we’ve selected a few @rooks/use-debounce examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
imbhargav5 / rooks / packages / storybook / src / debounce.js View on Github 
function DebouncedDemo() {
const [value, setValue] = useState(0);
const fn = useDebounce(() => {
console.log("run");
setValue(value + 1);
}, 500);
return (
<div>
<p>Click fast!</p>
<button>Click me</button>
<p> Clicked count {value} </p>
</div>
);
}function DebouncedDemoEvents() {
const [value, setValue] = useState("");
const [autocompleteValue, setAutocompleteValue] = useState("");
const onChange = e => {
setValue(e.target.value);
updateAutocomplete(e);
};
const updateAutocomplete = useDebounce(e => {
setAutocompleteValue(e.target.value);
}, 500);
return (
<div>
<form>
<h1>Type value and watch the second value change with debounce!</h1>
<fieldset>
<label>Typed value</label>
<input value="{value}" id="value">
</fieldset>
<fieldset>
<p>This value is a debounced version of typed value</p>
<label>Value used for autocomplete.</label>
<input value="{autocompleteValue}" disabled="" id="autocomplete">
</fieldset></form></div>
