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 JSX spread attributes for the most part. Just to be absolutely clear, this is what I mean:
var Child = React.createClass({
handleClick: function(){
this.props.owner.setState({
count: this.props.count + 1,
});
},
render: function(){
return <div onClick={this.handleClick}>{this.props.count}</div>;
}
});
var Parent = React.createClass({
getInitialState: function(){
return {
count: 0,
owner: this
};
},
render: function(){
return <Child {...this.state}/>
}
});
And it works (http://jsbin.com/xugurugebu/edit?html,js,output), you can always go back to this component to understand whats going on and keep state as minimal as possible.
So the actual question is, if that is/isn't a good practice and why.
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.
