title: React - componentWillReceiveProps method: new vs updated instance
body: <p>I am new to React and programming in general and have a question regarding <code>componentWillReceiveProps</code> method. Inside the <code>LikesComponent</code> class there is <code>updateLikes</code> method that does <code>ReactDOM.render(&lt;LikesComponent likes={this.props.likes+1} /&gt;, document.getElementById("app"))</code>. I thought that every time <code>&lt;ComponentName /&gt;</code> is called a new instance is going to be created, that's why I was very surprised when I saw a message logged by <code>componentWillReceiveProps</code> method. Instead, I was expecting to see messages logged by <code>getDefaultProps, getInitialState and render</code> methods. So, doesn't calling <code>&lt;ComponentName /&gt;</code> always create a new instance of that class? Could you please elaborate on when a new instance is created and when the instance is just updated? I am quite confused now. Thanks in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding: 40px;
    font-family: "helvetica neue", sans-serif;
  }
  
  .container {
    width: 600px;
    margin: auto;
    color: black;
    padding: 20px;
    text-align: center;
  }
  .container h1 {
    margin: 0;
    padding: 20px;
    font-size: 36px;
  }
  .container .btn {
    border: 0;
    padding: 15px;
    margin: 10px;
    width: 20%;
    font-size: 15px;
    outline: none;
    border-radius: 3px;
    color: #FFF;
    font-weight: bold;
  }
  
  .btn.blue-btn {
    background-color: #55acee;
    box-shadow: 0px 5px 0px 0px #3C93D5;
  }
  
  .btn.blue-btn:hover {
     background-color: #6FC6FF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;title&gt;React tutorial&lt;/title&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
      &lt;script type="text/babel"&gt;
      var LikesComponent = React.createClass({
        updateLikes: function() {
          ReactDOM.render(
            &lt;LikesComponent likes={this.props.likes+1}/&gt;,
            document.getElementById("app")
          )
        },
        getDefaultProps: function() {
          console.log("getDefaultProps");
          return({
            likes: 0
          })
        },
        getInitialState: function() {
          console.log("getInitialState");
          return({
            popular: false
          })
        },
        componentWillReceiveProps: function(nextProps) {
          console.log(nextProps);
          console.log("Componentwillreceiveprops");
          this.setState({
            popular: nextProps.likes &gt;= 10
          })
        },
        render: function() {
          console.log("Component Rendered");
          return (
            &lt;div className="container"&gt;
              &lt;h1&gt;{this.state.popular ? "I'm popular" : null}&lt;/h1&gt;
              &lt;button className="btn blue-btn" onClick={this.updateLikes}&gt;Likes: {this.props.likes}&lt;/button&gt;
            &lt;/div&gt;
          )
        }
      });
  
      ReactDOM.render(
        &lt;LikesComponent /&gt;,
        document.getElementById("app")
      );
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>