CODEWITHSUNDEEP
javascriptreactjs
3daygg
3daygg

Reputation: 75

ReactJS , render method performance impact



I'm pretty new in the React world , while working on a React based project for my company , i noticed that all the components have been written without taking into consideration when a particular component should re-render.

All the component within the project are class components and within the project i can't find a single reference to the shouldComponentUpdate() method , to my understanding that means that everytime the props / state of an x component changes that one gets re-rendered with all the related child components , is that correct ? or React is still smart enough to not re-render everything when -> the state/props change cause no impact on the component output?

This was bothering me as if i get it correctly this can cause very bad performances across the web app , and i wanted to be sure if I could raise this issue to my boss..

Upvotes: 1

Views: 465

Answers (2)

Adam Jenkins
Adam Jenkins

Reputation: 55792

React has been striving to move away from lifecycle methods on class based components and encourage functional components because the lifecycle methods are "bug traps".

The ability to use componentDidUpdate and shouldComponentUpdate encourage people to use them and write complicated conditions that are hard to test and result in harder to debug edge cases.

The fact that you can't find any of these methods in your code base being used is, in my opinion, a good thing.

To answer your question - react is very fast out of the box. It renders everything on update unless you specifically tell it not to (using React.memo/React.PureComponent or shouldComponentUpdate) but you should not worry about the fact that it does this, until and unless you see performance issues.

If you don't see any performance issues, then nothing is wrong and go on about your business.

EDIT: I also want to be clear that react doesn't rerender "everything" on state updates anyway. It just depends on how you structure your components. I've put together a quick example that shows that react won't call render on components pass in as children when a component updates:

https://stackblitz.com/edit/react-3kuxg9

Upvotes: 2

Ansh Saini
Ansh Saini

Reputation: 415

By default, react will re-render all the child components even if the props don't change for the child components. But this can be prevented if you are using React.PureComponent. I suggest you should check for this as well in your codebase. If not, then you may face some performance issues.

Upvotes: 0

Related Questions