All the credit goes to @xnimorz
This is a reworked copy of use-debounce
library from @xnimorz (https://github.com/xnimorz/use-debounce) for "preact".
The code of the hook is the same, except switching from react to preact package.
useDebounce preact hook
Install it with yarn:
yarn add use-debounce-preact
Or with npm:
npm i use-debounce-preact --save
Simple debouncing
/** @jsx h */;;; { const text setText = ; const value = ; return <div> <input defaultValue='Hello' onInput= { ; } /> <p>Actual value: text</p> <p>Debounce value: value</p> </div> ;}
Debounced callbacks
Besides useDebounce
for values you can debounce callbacks, that is the more commonly understood kind of debouncing.
; { const value setValue = ; // Debounce callback const debouncedCallback = ; // you should use `e => debouncedCallback(e.target.value)` as react works with synthetic evens return <div> <input defaultValue=defaultValue onInput= /> <p>Debounced value: value</p> </div> ;}