From this email thread on designing React UI and talking to a few folks, I understand that the disagreement largely is on passing the entire state object to all components.
I think all components should not share the same state object. Here's why.
Like pure functions. When we pass the a common state variable to all components, the render method would be triggered even for unrelated changes. The Virtual DOM does intelligent work, but that is only after React has regenerated the component (in the Virtual DOM). It might be cheap, but not necessary. In the unavoidable scenario where we have to pass state information to a componenty that it doesn't need, we should use the PureRenderMixin or implement shouldComponentUpdate on every(or selected nodes) component to avoid re-rendering everything all the time. Everywhere else we should just tie the component to the piece of state that it relies on.
While we think about reusing the store we should also reuse components. I'd even argue component reuse is more likely than store. A pure view component can be reused everywhere. In fact, the client list table that’s Shane mentioned below can be used across various projects. For example, Facebook has open sourced a table FixedDataTable that they built internally for their Ads team. We should be creating more of those internally as well. To build reusable components, we need to specify clear interfaces. If we pass in a big state object as prop, that affects portability.
One of our motivations as I understand for using a common state is to share information between components. The React team suggests using a simple event system to pass information between components that don’t share a common parent.
Passing simple state and formulating the tight interfaces around components enhances reuse and readability. We might have to pass in big state objects to components in some situations. That should be an exception and not a rule.
All this is common knowledge to this team, but I hope there was something worthwhile your time.