Practical debounce

Why

Many debounce examples and packages out there contain dependencies on larger packages like lodash. While lodash has many features you don't need the extra bloat in your application.

Hook

In the example below debounce will execute your callback after a 250ms delay.

import useDebounce from "@practicaljs/react-debounce";

const { debounce } = useDebounce();

const myMethod = () => {
	debounce(() => {
		someDelayedMethodHere("test");
	}, 250);
};

If you need control over canceling the debounce, use the cancel method.

import useDebounce from "@practicaljs/react-debounce";

const { cancel } = useDebounce();

useEffect(() => {
	return () => {
		cancel();
	};
});

Component

In the example below the DebounceInput component will call the onChange method after 250ms.

import DebouncedInput from "@practicaljs/react-debounce";

const listen = (event: ChangeEvent<HTMLInputElement>) => {
	console.log(event.target.value);
};

return <DebouncedInput delay={250} onChange={listen}></DebouncedInput>;