title: Preventing react-redux from re-rendering whole page when state changes
body: <p>I am reading several articles about how to prevent <code>react-redux</code> from re-rendering the whole page, when only one little thing changes. 
  One article suggests that instead of wrapping all into one big <code>container</code> (as in figure 1 here) wrapping all into smaller <code>containers</code> (as in figure 2 here). If something changes in <code>Container 2</code>, only <code>Component 2</code> and <code>Component 3</code> are getting re-rendered. <code>Component 1</code> would not re-render.</p>
  
  <p><strong>Figure1</strong>
  <a href="https://i.stack.imgur.com/VBtL8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VBtL8.png" alt="Figure1"></a></p>
  
  <p><strong>Figure2</strong>
  <a href="https://i.stack.imgur.com/GvUOL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GvUOL.png" alt="Figure2"></a></p>
  
  <p>I have following questions:</p>
  
  <ul>
  <li>If I wrap everything in smaller containers, I would need "several" global states, for each <code>container</code> one (as indicated with the pseudo-code on the bottom of the figure). Is that common practice? </li>
  <li>If it is ok to have "several" global states and I would need in some property from <code>Container1</code> in <code>Container2</code>, I would need to connect that with two global states. To me that feels like it could get messy very quick. Where does what come from?</li>
  <li>When and where would I use the <code>react</code> method <code>shouldComponentUpdate()</code>? Using the <code>Big Container</code> approach how would I differ which <code>Component</code> should be rerendered?! If implemented in the <code>Components</code>, they would not be "dump" anymore, because they need to access the global state in order to decide whether to re-render or not. I would not be able to reuse <code>Components</code> because every <code>Component</code> has its own special case when to rerender and when not. I am not sure where and when to use <code>shouldComponentUpdate()</code></li>
  </ul>
  
  <p>Please note that I am pretty new to this and might have made wrong assumptions etc. I basically want to know how not to re-render the whole page, when only one thing needs to be updated. The results from asking google differ a lot. </p>