score:126

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.

score:2

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

score:9

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.

score:48

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