title: Render Only Child Component Only On Prop Change
body: <p>I want to re-render my child component <strong>without</strong> re-rendering the parent  component when the <strong>parent's state changes</strong>.</p>
  
  <p>In this example, componentWillReceiveProps is never called.</p>
  
  <p>Thank You!</p>
  
  <hr>
  
  <p><strong>Parent Component</strong></p>
  
  <pre><code>export default class Parent extends Component {
      constructor(props) {
          super(props);
          this.state = {
              myValue: 'hello'
          }
      }
  
      shouldComponentUpdate(nextProps, nextState) {
          return false;
      }
  
      myFunction() {
          this.setState(prevState =&gt; {
            return {myValue: 'world'};
          });
      }
  
      render() {
          return (
              &lt;View&gt;
                  &lt;Button onPress={myFunction} title="Learn More"/&gt;
                  &lt;Child myText={this.state.myValue}/&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>Child Component</strong></p>
  
  <pre><code>export default class Child extends Component {
      constructor(props) {
          super(props);
      }
  
      componentWillReceiveProps(nextProps) {
          console.log('This Is Never Called');
      }
  
      render() {
          return (
              &lt;View&gt;
                  &lt;Text&gt;{this.props.myText}&lt;/Text&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>