How to reduce unnecessary and redundant component renders

(Dharric) #1

We have an app that uses React and Es6. I find dealing with and reasoning about state and props difficult and cumbersome. Specifically, because the state is asynchronously modified and we have significant child component hierarchies, trying to know what is going on at any given time is basically impossible. On top of this I am finding, again due to the significant component hierarchies that we have, rendering is being called multiple times due to state or prop updates. For example if a component has 4 props; those props could be modified by state or props higher up the chain; and each of those state or prop fields may be modified by state or props higher up the chain, etc. But since this child has 4 props, any one of them being updated will cause a re-render of that component, even when all the props values may in the end be the same.

I heard that react does not call render when state or prop values are the same, but that is not my experience at all. And even if that were true the other component life cycle functions, and therefore my hooks into them, do most definitely get called. Is there a strategy to prevent these redundant re-renders? I understand that re-render may not actually change the dom, as React is smart enough to know when nothings changed, however re-running component code unnecessarily is still unnecessary and redundant.

(Max Nathaniel Ho) #2

React does call the render function when state or prop values are the same if the page that the component is inside re-renders.

If you want to optimise for performance, look at how shouldComponentUpdate does it.

And if your component has a simple, one-level data structure, you can PureComponent instead of Component. It optimises the re-rendering process for you as it implements a shallow checking on your props and state.

(Ramya) #3

Hi Max,
Previously I also had the similar issue, Thanks for providing the solutions, It is useful for me.

ReactJS Online Training in India

(Max Nathaniel Ho) #4

@Ramyace4455 You’re welcome!

Check out React Fiber -