title: React children rendering procedure
body: <p>I have a doubt regarding children stuff in react. I know there are documents that tell about this thing but an exact explanation could be better.</p>
  
  <p>Let's say that my react component tree is like this.(for simplicity  have added only 2 levels could be more)</p>
  
  <pre><code>         A
      A1       A2
   A11 A12   A21 A22
  </code></pre>
  
  <p>A has 2 children A1 and A2 and both have 2 children as shown. (children as tree structure not react children thing).</p>
  
  <p>Now the component A22 is dependent on A only it takes props from A and should re render based on the props given by A. </p>
  
  <p>Now to solve that I did that I rendered A22 in A like this</p>
  
  <pre><code>render(){
      return (
        &lt;otherThing/&gt;
        &lt;A2&gt;
           &lt;A22 {propsForA22}/&gt;
        &lt;/A2&gt;
      );
  }
  </code></pre>
  
  <p>cool now A2 is the parent of A22 react tree wise but the rendering is done by A.</p>
  
  <ol>
  <li><p>Now can anyone explain order in which the way lifecycle methods will happen for A, A2, A22.</p></li>
  <li><p>What will happen if A2 re-renders will it cause A22 to re-render.</p></li>
  <li>if A re-renders but no props for A2 changes lets say that its shouldComponent update blocks updation in that case what will happen about A22.</li>
  </ol>