DEV Community

Optimizing React Applications for Maximum Performance

Suraj Vishwakarma on August 19, 2024

Introduction I have been writing React code for more than 3 years now. However, one thing that I didn’t focus on initially was optimizin...

Read full post

Russ Painter • Aug 20 '24

Great stuff. Can anyone recommend a library for throttle/debounce? In the vue world we have VueUse for this sort of thing.

José Pablo Ramírez Vargas • Aug 20 '24

Debouncing is the simplest thing to do. Just code it.

export function debounce(fn, timeout) {
    timeout = timeout ?? 500;
    const timeoutId = setTimeout(fn, timeout);
    return {
        canccel() {
            clearTimeout(timeoutId);
        }
    };
};

Or am I missing something?

Joao Polo • Aug 21 '24

debounce + react async updates (useState, etc) + async fetch might be a bit more complex.

Red Ochsenbein (he/him) • Aug 20 '24

Write it yourselves. It's really not that hard.

CitronBrick • Aug 21 '24

rxjs can do that. It used to be bundled with Angular. Not sure about now.
rxjs.dev/api/index/function/debounce
rxjs.dev/api/index/function/throttle

Joao Polo • Aug 21 '24

used rxjs on react and it's awesome. I'm not using for now, but I liked it.

Suraj Vishwakarma • Aug 20 '24

You can look into the JS utility library such as Lodash and Underscore.

Joao Polo • Aug 21 '24

I use aHooks and it really matter, because you can define what you need to execute on throttle or debounce. Also this lib can deal with loading status, auto refresh, etc.