Accepted answer

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.

edit: after a few years many people are using functional components. if that's the case for you then you'll want to check out react.memo. by default functional components will re-render every time just like the default behavior of class components. to modify that behavior you can use react.memo() and optionally provide an areequal() function.


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


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.


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!

Related Query

More Query from same tag