DEV Community

Cover image for 🔥 🔥 🔥 Do you know all these means to avoid repeated rendering of React components?

🔥 🔥 🔥 Do you know all these means to avoid repeated rendering of React components?

liu-jin-yi on October 31, 2021

Use React has been three years, in these three years inside also deposited a lot of best practices on React code optimization, today first write a ...
Collapse
 
efpage profile image
Eckehard

Very impressive demonstration about the stress you get using REACT. What precisely was the advantage of using REACT?

Collapse
 
liujinyi profile image
liu-jin-yi

Flexible! Including its powerful ecosystem! and community!

Collapse
 
souksyp profile image
Souk Syp.

I used PureComponent for every class component. Is it a bad practice ? 😟

Collapse
 
johnsawiris profile image
John Sawiris

Yes, that is a bad practice what you're doing is premature optimization, and that is the root of all evil.
PureComponent optimize the performance when you have a performe issue; using it without an issue will hinder the performance because every component has to call shouldComponentUpdate and that doesn't happen for free. And functional components are not the answer either, they're not that much different from class components.

Collapse
 
souksyp profile image
Souk Syp.

Okay, thanks! Man need a fix

Collapse
 
liujinyi profile image
liu-jin-yi • Edited

Agree

Collapse
 
badpractice profile image
Bad Practice

I'll be the judge of that

Collapse
 
blackr1234 profile image
blackr1234

I use memo for all function components but I always provide the comparison condition.

Collapse
 
rammina profile image
Rammina

Thank you for the informative article!

I have heard about useMemo and useCallback before, but I never really got around to using them in my projects. I guess I caused unnecessary rendering.

Collapse
 
liujinyi profile image
liu-jin-yi

Thanks for the message! These two Hooks also can not be used too often Oh! And look at the situation flexible use!

Collapse
 
nicolasdanelon profile image
Nicolás Danelón

just a little question... what about prevSrate?
reactjs.org/docs/hooks-reference.h...

Collapse
 
liujinyi profile image
liu-jin-yi

Sorry I didn't get your point!