title: ReactJS: Why is passing the component initial state a prop an anti-pattern?
body: <p>I've created a small ReactJS dashboard with the help of SocketIO for live updates. Even though I have the dashboard updating, it bugs me that I'm not quite sure if I did it correctly.</p>
  
  <p>What bugs me the most is the <a href="http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState as anti-pattern</a> post. I've created a dashboard that gets live updates from a server, requiring no user interaction beyond loading the page. From what I've read, <code>this.state</code> should contain things that will determine whether the component should be re-rendered, and <code>this.props</code>.... I don't know yet.</p>
  
  <p>However, when you initially call <code>React.render(&lt;MyComponent /&gt;, ...)</code>, you can only pass props. In my case, I get all data from the server, so the initial props just end up in <code>this.state</code> anyway. So all of my components have something like this:</p>
  
  <pre><code>getInitialState: function() {
      return {
          progress: this.props.progress,
          latest_update: this.props.latest_update,
          nearest_center: this.props.nearest_center
      }
  }
  </code></pre>
  
  <p>Which, unless I've misinterpreted the aforementioned blog post, is an anti-pattern. But I see no other way of injecting the state into the Component, and I don't understand why it's an anti-pattern unless I relabel all of my props to prepend <code>initial</code> on them. If anything, I feel like <em>that's</em> an anti-pattern because now I have to keep track of more variables than I did before (those prepended with <code>initial</code> and those without). </p>