title: React renders unnecessary components
body: <p>In <a href="https://carpben.github.io/Choose-My-Next-Destination/" rel="nofollow noreferrer">this</a> simple Create-React-App application , I have a simple, static, Header component. For readability the header is held in a separate component. When using : Dveloper Tools - React - and selecting heighlight updates, I'm surprised to see that the Header component renders each time the destination changes. Of course this happens because the state of the parent, the App component, changes.</p>
  <p>It was originally build as a functional component; I tried changing it to a React.pureComponent and React.Component with a 'shouldComponentUpdate' function that returns false but it did not help - the component still gets updated/rendered.</p>
  <p>I guess this gets to the 'Virtual Dom' and does not render to the actual dom, but in more complicated apps it is still costly. Any suggestions?
  <a href="https://github.com/carpben/Choose-My-Next-Destination" rel="nofollow noreferrer">Code</a></p>
  <h2>Update</h2>
  <p>I've forked the original repository to demonstrate the issue. In <a href="https://choose-my-next-destination-2.firebaseapp.com/" rel="nofollow noreferrer">this</a> example the Header component is build with React.Component and shouldComponentUpdate returns false. Yet the header renders each time the destination changes.
  <a href="https://github.com/carpben/choose-your-next-destination-should" rel="nofollow noreferrer">Code</a></p>