title: Is good practice to pass state as props to children?
body: <p>I find myself aggregating the state on one component. Normally the node I know I will re-render so changes can propagate and state is not all over the place. Lately, I've found myself passing the state of this component as props to its first children using <a href="https://facebook.github.io/react/docs/jsx-spread.html" rel="noreferrer">JSX spread attributes</a> for the most part. Just to be absolutely clear, this is what I mean: </p>
  
  <pre class="lang-js prettyprint-override"><code>var Child = React.createClass({
    handleClick: function(){
      this.props.owner.setState({
        count: this.props.count + 1,
      });
    },
    render: function(){
      return &lt;div onClick={this.handleClick}&gt;{this.props.count}&lt;/div&gt;;
    }  
  });
  
  var Parent = React.createClass({
    getInitialState: function(){
      return {
        count: 0,
        owner: this
      };
    },
    render: function(){
      return &lt;Child {...this.state}/&gt;
    }
  });
  </code></pre>
  
  <p>And it works (<a href="http://jsbin.com/xugurugebu/edit?html,js,output" rel="noreferrer">http://jsbin.com/xugurugebu/edit?html,js,output</a>), you can always go back to this component to understand whats going on and keep state as minimal as possible. </p>
  
  <p>So the actual question is, if that is/isn't a good practice and why. </p>
  
  <p>The downside I can think about at the moment is that with this approach maybe every child component would always re-render when there is a state change on the owner, if that's the case I think the above is something to use on small Component trees.</p>