title: Pass new server data to react.js components
body: <p>I'm new to React.js and struggling to understand few core concepts to decide should we use this library for our application. My main problem is actually handling update in model that fetched from server. </p>
  
  <p>Imagine, that I have a page that should display five different models. I've built it in the way described in this article: <a href="http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html" rel="noreferrer">http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html</a>, so I have "root" component where all the 5 models passed and using props they are going down to the components that hold this models. So, now 2 models updated (I get this events from my model code that live outside of react components) and I need to reflect this on UI. What is the best way to do this? </p>
  
  <p>I'm thinking about following options:</p>
  
  <ol>
  <li>Run renderComponent with a new data once again and rely on the DOM diff react techniques. I have a concern with this, since I'll need to do this on any small change of data. </li>
  <li>Call setState for the components that holding this models. In this way, data become not prop, but state which is (from what I understand) not a good practice. Plus, I don't see any way to get ref to the child component outside of the root component.</li>
  <li>Having multiple renderComponent calls, so this way I will have access to setProps for any of this component. But then I will need to do some templating work (to have all the containers available on the page) and it kills all the react idea. </li>
  <li>Having one root component that include all the possible models in application displayed to users and call setProps for changing models. My concern here, that this component will grow pretty big and become "spaghetti" at some point + concerns from point 1.</li>
  </ol>
  
  <p>Thank you in advance and hope I was able explain my problem clearly. </p>