DEV Community

Cover image for How to make a custom Debounce hook in react js
Rajesh Royal
Rajesh Royal

Posted on

How to make a custom Debounce hook in react js

#react #javascript #beginners #tutorial

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]);
};
Enter fullscreen mode Exit fullscreen mode

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]
  );
Enter fullscreen mode Exit fullscreen mode

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 👍

Top comments (3)

Collapse
 
rajeshroyal profile image
Rajesh Royal • • Edited

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.

Collapse
 
pratikdungarani profile image
pratikdungarani • • Edited

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

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

return debouncedValue;

}

Collapse
 
rajeshroyal profile image
Rajesh Royal • • Edited

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

Your comment is super helpful, thanks man 🤘

Read next

riteshshukla04 profile image

Building React Native In-App Modules bypassing the JS bridge.

Ritesh Shukla -

micaavigliano profile image

Accessible components: Pagination

Mica -

jacksonsantin profile image

Login/cadastro com firebase + Vue JS #PASSO 1️⃣

Jackson Dhanyel Santin -

laustke profile image

I created a video tutorial on how to make a responsive sidebar using CSS and vanilla Javascript

Louis Austke -