title: how to *not* to update functional component when its data has not changed
body: <p>So i have a react app where the root component is class based and holds the state as the follows:</p>
  
  <pre><code>this.state = {
      dataA: { //stuff here},
      dataB: { //stuff here}
  }
  </code></pre>
  
  <p>where <code>dataA</code> gets passed to a child functional component A, and <code>dataB</code> gets passed down to a child functional component B.</p>
  
  <p>but whenever i do <code>this.setState({dataA: { new state A cotnent }})</code>, component B also gets updated when though its data has not been changed.</p>
  
  <p>Since component B is a functional component, i cannot implement <code>shouldComponentUpdate</code> method. So is there a way to not render component B when only <code>dataA</code> has changed? Thanks!</p>