DEV Community

Muhammad Hamza Hijazi
Muhammad Hamza Hijazi

Posted on

Why we don't and should not use React.memo with every compoent to boost performance ?

If you have been working with React chances are you have worked with React.memo which is used to avoid unnecessary renders of a compoent which results in boosting the performance of that component.

Why we don't use React.memo in all our components to increase performance of compoents?

I know the answer but want to see how you think about this.

Discussion (1)

Collapse
jackmellis profile image
Jack

We did this, to literally every component in our app. Hundreds if not thousands of them. We thought it was a great idea, and it never particularly bit us hard or anything. But looking back, it was mostly unnecessary.
Rendering a component is pretty cheap, so you have to weigh up the cost of rendering a component several times, vs the cost of comparing all of that component's props several times. Unless a component is pretty large and complex, the prop check will often just add extra overhead you didn't need to bother with.
In general: keep it simple, then add optimizations when you actually hit performance problems.