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.

Madza • Aug 21 '24

This is awesome, thanks for sharing mate!

Suraj Vishwakarma • Aug 22 '24

Thanks, man.

Antonio Rodríguez • Aug 20 '24

Great post.

KAMAL raj • Aug 20 '24

Very informative 👏

mohamed karim • Aug 22 '24

Thank for sharing

Boopathi • Aug 20 '24

short and crisp

Suraj Vishwakarma • Aug 20 '24

Yeah just like React Component.

Sachin Gadekar • Aug 20 '24

more informative

Suraj Vishwakarma • Aug 20 '24

I am glad that you like it.

Martin Baun • Aug 20 '24 • Edited

Great insights! Callstack has an excellent guide to React optimization as well :)

Rushikesh Suryawanshi • Aug 20 '24

React high order components could also optimise your code

케빈 • Aug 21 '24

nice

amin.xiv • Oct 20 '24

I don't even know how to use React (yet) what am I even doing ? Anyway it was such a helpful post 👏