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 (
      <div>
        {
          Object.keys(viewConfig.availableSubviewConfigMap).map((sectionName, index) => {
            var subviewConfigData = viewConfig.availableSubviewConfigMap[sectionName]
            return (
              <ViewConfigSettingRow
                key={sectionName}
                viewConfigData={subviewConfigData}
                sectionName={sectionName}
                parentViewConfig={viewConfig}
                />
            )
          })
        }
      </div>
    )
  }

Answer 1

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