DEV Community

Cover image for Optimizing React Applications for Maximum Performance

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...
Collapse
 
geekymonkey profile image
Russ Painter

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

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

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

Or am I missing something?

Collapse
 
joaozitopolo profile image
Joao Polo

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

Collapse
 
syeo66 profile image
Red Ochsenbein (he/him)

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

Collapse
 
joaozitopolo profile image
Joao Polo

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.

Collapse
 
surajondev profile image
Suraj Vishwakarma

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

Collapse
 
citronbrick profile image
CitronBrick

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

Collapse
 
joaozitopolo profile image
Joao Polo

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

Collapse
 
ikemcodedit profile image
Ikem O

You can check out "use-debounce" library too

Collapse
 
joshua_raffel_7626878ce5e profile image
Joshua Raffel

Have a look on this library: usehooks-ts.com/
It supports many useful react hooks including debounce.

Collapse
 
madza profile image
Madza

This is awesome, thanks for sharing mate!

Collapse
 
surajondev profile image
Suraj Vishwakarma

Thanks, man.

Collapse
 
anjrot profile image
Antonio Rodríguez

Great post.

Collapse
 
martinbaun profile image
Martin Baun • Edited

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

Collapse
 
gadekar_sachin profile image
Sachin Gadekar

more informative

Collapse
 
surajondev profile image
Suraj Vishwakarma

I am glad that you like it.

Collapse
 
programmerraja profile image
Boopathi

short and crisp

Collapse
 
surajondev profile image
Suraj Vishwakarma

Yeah just like React Component.

Collapse
 
kamal_raj_127b2d66660b986 profile image
KAMAL raj

Very informative 👏

Collapse
 
mohamed_karim_2dddebb42bd profile image
mohamed karim

Thank for sharing

Collapse
 
rushikesh_suryawanshi_9f9 profile image
Rushikesh Suryawanshi

React high order components could also optimise your code

Collapse
 
_e1bb2fbb962254aef9fb4e profile image
케빈

nice

Collapse
 
mannega profile image
Mannega

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