title: Selective children component render
body: <p>A basic question I need help here.
  Whenever this.setState invoked at parent components, all the children components will be rendered. This will cause the performance issue if I have huge amount of child components.</p>
  
  <p>Lets give an example,</p>
  
  <p><strong>Parent Component</strong></p>
  
  <pre><code>handleToggleTick() {
      const newObj = Object.assign({}, this.state, { iconName: ''});
      this.setState({
        iconName: newObj.iconName,
      });
  }
  
  render() {
    return(
      &lt;ChildComponentA iconName={this.state.iconName} toggleTick={() =&gt; this.handleToggleTick}&gt;&lt;/ChildComponentA&gt;
      &lt;ChildComponentB&gt;&lt;/ChildComponentA&gt;
      &lt;ChildComponentC&gt;&lt;/ChildComponentA&gt;
    )
  }
  </code></pre>
  
  <p>Based on the example above, whenever handleToggleTick invoked from childcomponentA, setState invoked for new iconName. What I want is, <strong>only ChildComponentA only the one get render</strong> since props.iconName is related to it, but not for childcomponentB and childcomponentC.</p>
  
  <p>I understand there is an option to check shouldComponentUpdate in childcomponent to prevent it get render. But, imagine I have over 100 of childcomponent, would it be frustrating to write over 100 times of shouldComponentUpdate method?</p>
  
  <p>I need help here, please advice!</p>