title: react - children's render() method starts after parent's render() method has finished , why is this ?
body: <p>The react code below prints:</p>
  
  <pre><code>before var rootElement
  after var rootElement
  render start
  outer render start
  outer render end
  inner render start
  inner render stop
  render end
  </code></pre>
  
  <p>I was expecting:</p>
  
  <pre><code>before var rootElement
  after var rootElement
  render start
  outer render start
  inner render start
  inner render stop
  outer render end
  render end
  </code></pre>
  
  <p>How can this behaviour be explained ? </p>
  
  <p>How does this make sense ? </p>
  
  <p>Why is this happening ?</p>
  
  <p>Isn't it so that render should be recursively called for each children (in a depth first manner ) ? Why not ?</p>
  
  <p>Is this behaviour described somewhere ?</p>
  
  <p>What mental model should I have of React's render to understand this behaviour ?</p>
  
  <p>Code:</p>
  
  <pre><code>var CompInner = React.createClass({
      render: function() {
          console.log("inner render start")
          var res=React.createElement('div', {}, this.props.name,
              ' child1',' child2'
          )
          console.log('inner render end')
          return (res )
      },
  });
  
  var innerElement = React.createElement(CompInner, {name: "prop to inner"})
  
  var CompOuter = React.createClass({
      render: function() {
          console.log("outer render start")
          var res=React.createElement('div', {}, this.props.name,
                  innerElement)
          console.log("outer render end")
          return (res )
      },
  });
  
  var outerElement = React.createElement(CompOuter, {name: "prop to outer"})
  
  console.log("before var rootElement")
  var rootElement =
      React.createElement('div', {},
          React.createElement('h1', {}, "Contacts"),
          outerElement
  
  );
  
  console.log("after var rootElement")
  
  console.log("render start")
  ReactDOM.render(rootElement, document.getElementById('react-app'))
  console.log("render end")
  console.log("bla")
  </code></pre>