A custom hook for react: useDebounce

Demo (Codepen)

https://codepen.io/ferdotnet/pen/MWXXzbg

Install

yarn add @ferdotnet/use-debounce

How to use it?

const App = () => {
    const [query, setQuery] = useState('');
    const qDebounced = useDebounce(query);
    
    const handleChange = (el) => {
        setQuery(el.target.value);
    };
    
    return (
        <div className="wrapper">
            <input type="text" placeholder="Write something here.." onChange={handleChange} />
            <span>{qDebounced || '👀'}</span>
        </div>
    );
});