title: React component initialize state from props
body: <p>In React, are there any real differences between these two implementations?
  Some friends tell me that the <code>FirstComponent</code> is the pattern, but I don't see why. The <code>SecondComponent</code> seems simpler because the render is called only once.</p>
  <p>First:</p>
  <pre><code>import React, { PropTypes } from 'react'
  
  class FirstComponent extends React.Component {
  
    state = {
      description: ''
    }
  
    componentDidMount() {
      const { description} = this.props;
      this.setState({ description });
    }
  
    render () {
      const {state: { description }} = this;    
      return (
        &lt;input type=&quot;text&quot; value={description} /&gt; 
      );
    }
  }
  
  export default FirstComponent;
  </code></pre>
  <p>Second:</p>
  <pre><code>import React, { PropTypes } from 'react'
  
  class SecondComponent extends React.Component {
  
    state = {
      description: ''
    }
  
    constructor (props) =&gt; {
      const { description } = props;
      this.state = {description};
    }
  
    render () {
      const {state: { description }} = this;    
      return (
        &lt;input type=&quot;text&quot; value={description} /&gt;   
      );
    }
  }
  
  export default SecondComponent;
  </code></pre>
  <p>Update:
  I changed <code>setState()</code> to <code>this.state = {}</code> (thanks joews), However, I still don't see the difference. Is one better than other?</p>