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

`javascript
/* @jsx h /
import { h } from 'preact';
import { useState } from 'preact/hooks';
import { useDebounce } from 'use-debounce-preact';

export default function Input() {
const [text, setText] = useState('Hello');
const [value] = useDebounce(text, 1000);

return (



);
}
`

Debounced callbacks

Besides useDebounce for values you can debounce callbacks, that is the more commonly understood kind of debouncing.

`js
import useDebouncedCallback from 'use-debounce-preact/lib/callback';

function Input({ defaultValue }) {
const [value, setValue] = useState(defaultValue);
// Debounce callback
const [debouncedCallback] = useDebouncedCallback(
// function
(value) => {
setValue(value);
},
// delay in ms
1000,
// deps (in case your function has closure dependency like https://reactjs.org/docs/hooks-reference.html#usecallback)
[]
);

// you should use e => debouncedCallback(e.target.value) as react works with synthetic evens
return (



);
}
``