React, Does render on parent makes children re-render?

Question

Log shows that my parent component is rerendering itself. But the child component's render method is not getting called. I thought child rerenders with the following logic, and I think I'm wrong about it. How does react decide which child components gets rerendered when parent rerenders? - Parent's render - -> child's `shouldComponentUpdate` gets called - -> if shouldComponentUpdate return true, child rerenders Parent render looks like ``` render() { let { viewConfig } = this.props console.log("ViewConfigSettingBase rendering") return (

{ Object.keys(viewConfig.availableSubviewConfigMap).map((sectionName, index) => { var subviewConfigData = viewConfig.availableSubviewConfigMap[sectionName] return ( ) }) }

) } ```

Accepted Answer

React re-renders on a props or state change. If you extended a PureComponent the children will do a check if the props have changed. If yes -> shouldComponendUpdate will return true otherwise false. Maybe this is the case?

Component lifecycle: https://facebook.github.io/react/docs/react-component.html

Updating

An update can be caused by changes to props or state. These methods are >called when a component is being re-rendered:

```
componentWillReceiveProps()  
shouldComponentUpdate()  
componentWillUpdate()  
render()  
componentDidUpdate()  
```

shouldComponentUpdate()

Use shouldComponentUpdate() to let React know if a component's output is >not affected by the current change in state or props. The default >behavior is to re-render on every state change, and in the vast majority >of cases you should rely on the default behavior.

shouldComponentUpdate() is invoked before rendering when new props or >state are being received. Defaults to true This method is not called for >the initial render or when forceUpdate() is used.

Returning false does not prevent child components from re-rendering when >their state changes.

Currently, if shouldComponentUpdate() returns false, then >componentWillUpdate(), render(), and componentDidUpdate() will not be >invoked. Note that 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.

If you determine a specific component is slow after profiling, you may >change it to inherit from React.PureComponent which implements >shouldComponentUpdate() with a shallow prop and state comparison. If you >are confident you want to write it by hand, you may compare this.props >with nextProps and this.state with nextState and return false to tell >React the update can be skipped.

You can find some documentation about the react render process on the following pages: https://facebook.github.io/react/docs/reconciliation.html https://facebook.github.io/react/docs/optimizing-performance.html

React, Does render on parent makes children re-render?

Solution

Problem