React: Parent component re-renders all children, even those that haven't changed on state change

Question

I haven\'t been able to find a clear answer to this, hope this isn\'t repetitive.

I am using React + Redux for a simple chat app. The app is comprised of an InputBar

Answer 1

If parent component props have changed it will re-render all of its children which are made using React.Component statement.

Try making your <MessageList> component a React.PureComponent to evade this.

According to React docs: In the future React may treat shouldComponentUpdate() as a hint rather than a strict directive, and returning false may still result in a re-rendering of the component. check this link for more info

Hope this helps anyone who is looking for the right way to fix this.

Answer 2

If a parent component is updated, does React always update all the direct children within that component?

No. React will only re-render a component if shouldComponentUpdate() returns true. By default, that method always returns true to avoid any subtle bugs for newcomers (and as William B pointed out, the DOM won't actually update unless something changed, lowering the impact).

To prevent your sub-component from re-rendering unnecessarily, you need to implement the shouldComponentUpdate method in such a way that it only returns true when the data has actually changed. If this.props.messages is always the same array, it could be as simple as this:

shouldComponentUpdate(nextProps) {
    return (this.props.messages !== nextProps.messages);
}

You may also want to do some sort of deep comparison or comparison of the message IDs or something, it depends on your requirements.

Answer 3

If you're using map to render child components and using a unique key on them (something like uuid()), maybe switch back to using the i from the map as key. It might solve the re-rendering issue.

Not sure about this approach, but sometimes it fixes the issue

Answer 4

If a parent component is updated, does React always update all the direct children within that component? -> Yes , by default if parent changes all its direct children are re-rendered but that re-render doesn't necessarily changes the actual DOM , thats how React works , only visible changes are updated to real DOM.

What is the right approach here? -> To prevent even re-rendering of virtual DOM so to boost your performance further you can follow any of the following techniques:

1. Apply ShouldComponentUpdate Lifecycle method - This is applied only if your child component is class based , you need to check the current props value with the prev props value ,and if they are true simply return false.

2. Use Pure Component -> This is just a shorter version to above method , again works with class based components

3. Use React memo -> this is the best way to prevent Rerendering even if you have functional components ,you simply need to wrap your components export with React.memo like : export default React.memo(MessageList)

Hope that helps!