DEV Community

Himanshupal0001
Himanshupal0001

Posted on

Debounce in Js⛹️‍♂️

Debounce is a mechanism for optimization in react. It reduces the unnecessary re-renders in react.

Where to use debounce
Remember when you type something on google and it gives you suggestions?
Debounce is used in these type of situtations. It can be used in search engines like e-commerce social media extra.
If you observe closely on typing the suggested words only appear either you complete a word or take a little pause.

Below is the code snippet you can use in these type of situations.


 let timer = 500, timeout;
    const debounce = (fun) => {
        clearTimeout(timeout);
        timeout = setTimeout(fun, timer);
    }


    const updateText = (text, id) => {
        debounce(() => props.updateText(text, id))
    };
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay