How to make a custom Debounce hook in react js

I could have use the Loadash naaahh... 🙅‍♀️ Loadash is too expensive.

So here is how you can make your own debounce effect with custom hooks in react js.

updated as per @lukeshiru comment

useDebouncedEffect.tsx

import { DependencyList, EffectCallback, useEffect } from "react";

export const useDebouncedEffect = (
   effect: EffectCallback, 
   delay: number, 
   deps?: DependencyList
) => {
  useEffect(() => {
    const handler = setTimeout(() => effect(), delay);

    return () => clearTimeout(handler);
    // using || operator because 
    // if its optional then it can be undefined.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [...(deps || []), delay]);
};

To use this hook simply call It like this:

import { useDebouncedEffect } from "./useDebouncedEffect";

  // debounce search onchange
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useDebouncedEffect(
    () => {
       // function which will be running on effect, 
       // in our case when something changes in search box.
       changeSearchState();
    },
    // time to wait before effect runs
    debounceTimeInMilliseconds
    // this is the dependency, if it changes it will trigger 
    // the debounce again
    [search]
  );

credit - from Internet [R&D]

Thanks for reading this far 😃

Fact: Do you know you can hit that follow button on top right and make it disappear 😄. Do not believe me try once 👍

Comments

[Rajesh Royal]

And you could even make it into a curried function and keep it pretty similar to a regular hook:

Not useful in this case, yes we can suppress TS warning but It will not be a good idea.

React Hook useEffect cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.

React Hook useDebouncedEffect cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function.

[pratikdungarani]

export function useDebouncedValue(value, wait) {
const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
     const id = setTimeout(() => setDebouncedValue(value), wait);
     return () => clearTimeout(id);
  }, [value]);

return debouncedValue;

}

[Rajesh Royal]

Didn't tried the use-debounce but the loadsh's Debounce was having some state persistence issue.

Your comment is super helpful, thanks man 🤘