title: React: Update Child Component Without Rerendering Parent
body: <p>What follows is a simple example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { Component } = React
  const { render } = ReactDOM
  
  const Label = ({ text }) =&gt; (
    &lt;p&gt;{text}&lt;/p&gt;
  )
  
  const Clock = ({ date }) =&gt; (
    &lt;div&gt;{date.toLocaleTimeString()}&lt;/div&gt;
  )
  
  class App extends Component {
    constructor(props) {
      super(props)
      this.state = {
        date: new Date()
      }
    }
    
    componentDidMount() {
      this.interval = setInterval(
        () =&gt; this.setState({ date: new Date() }),
        1000
      )
    }
    
    componentWillUnmount() {
      clearInterval(this.interval)
    }
    
    updateTime() {
      
    }
    
    render() {
      return (
        &lt;div&gt;
          &lt;Label text="The current time is:" /&gt;
          &lt;Clock date={this.state.date} /&gt;
        &lt;/div&gt;
      )
    }
    
  }
  
  render(&lt;App /&gt;, document.getElementById('app'))</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><code>this.setState({ date: new Date() })</code> is being called every second updating the Clock with the current time. To my knowledge, <code>setState</code> calls the render method on the App which causes the whole component to be rerendered including the Label.</p>
  
  <p>Is there a way pass date to Clock (causing it to be rerendered) without rerendering the entirety of the App component? How big of a role does this play in regards to performance?</p>