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 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.