title: React: Do children always rerender when the parent component rerenders?
body: <p>It is to my knowledge that if a parent component rerenders, then all its children will rerender UNLESS they implement <code>shouldComponentUpdate()</code>. I <a href="https://codesandbox.io/s/2x3rmx7rr0" rel="noreferrer">made an example</a> where this doesn't seem to be the true.</p>
  
  <p>I have 3 components: <code>&lt;DynamicParent/&gt;</code>, <code>&lt;StaticParent/&gt;</code> and <code>&lt;Child/&gt;</code>. The <code>&lt;Parent/&gt;</code> components are responsible for rendering the <code>&lt;Child/&gt;</code> but do so in different ways.</p>
  
  <p><code>&lt;StaticParent/&gt;</code>'s render function statically declares the <code>&lt;Child/&gt;</code> before runtime, like so:</p>
  
  <pre><code> &lt;StaticParent&gt;
      &lt;Child /&gt;
   &lt;/StaticParent&gt;
  </code></pre>
  
  <p>While the <code>&lt;DynamicParent/&gt;</code> handles receiving and rendering the <code>&lt;Child/&gt;</code> dynamically at runtime, like so: </p>
  
  <pre><code> &lt;DynamicParent&gt;
      { this.props.children }
   &lt;/DynamicParent&gt;
  </code></pre>
  
  <p>Both <code>&lt;DynamicParent/&gt;</code> and <code>&lt;StaticParent/&gt;</code> have <code>onClick</code> listeners to change their state and rerender when clicked. I noticed that when clicking <code>&lt;StaticParent/&gt;</code> both it and the <code>&lt;Child/&gt;</code> are rerendered. But when I click <code>&lt;DynamicParent/&gt;</code>, then only the parent and NOT <code>&lt;Child/&gt;</code> are rerendered.</p>
  
  <p><code>&lt;Child/&gt;</code> is a functional component without <code>shouldComponentUpdate()</code> so I don't understand why it doesn't rerender. Can someone explain why this is to be the case? I can't find anything in the docs related to this use case.</p>