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.
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();
};
});
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>;