title: react child state doesn't update with props from father (and deeper in the branch)
body: <p>The problem is following:
  I have components: Grandfather, father and child (literally :D).
  Grandfather passes his state through props to father (and father sets his state with it).
  Then father passes props to child and child also sets state with it.
  When i display this.props everything is fine, but when i display
  state then i see that nothing has changed in father and child.
  I heard there is something like componentWillReceiveProps() but it is already deprecated. </p>
  
  <p>Working example: <a href="https://codesandbox.io/s/doesitworkornot-rrcgt?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/s/doesitworkornot-rrcgt?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>
  
  <p>And codes:</p>
  
  <p>Grandfather.js</p>
  
  <pre><code>import React from "react";
  import Father from "./Father";
  
  class GrandFather extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        clickedCounter: 1
      };
    }
  
    onClick = e =&gt; {
      this.setState(prevState =&gt; ({
        clickedCounter: prevState.clickedCounter + 1
      }));
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.onClick}&gt;Press me&lt;/button&gt; &lt;br /&gt;
          Here is Grandfather -&gt; state value={this.state.clickedCounter}
          &lt;Father clickedCounter={this.state.clickedCounter} /&gt;
        &lt;/div&gt;
      );
    }
  }
  export default GrandFather;
  
  </code></pre>
  
  <p>Father.js</p>
  
  <pre><code>import React from "react";
  import Child from "./Child";
  
  class Father extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        clickedCounter: this.props.clickedCounter
      };
    }
    render() {
      return (
        &lt;div&gt;
          Here is Father -&gt; props value={this.props.clickedCounter} &lt;br /&gt;
          Here is Father -&gt; state value={this.state.clickedCounter}
          &lt;Child clickedCounter={this.props.clickedCounter} /&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Father;
  
  </code></pre>
  
  <p>Child.js</p>
  
  <pre><code>import React from "react";
  
  class Child extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        clickedCounter: this.props.clickedCounter
      };
    }
    render() {
      return (
        &lt;div&gt;
          Here is Child -&gt; props value={this.props.clickedCounter} &lt;br /&gt;
          Here is Child -&gt; state value={this.state.clickedCounter}
        &lt;/div&gt;
      );
    }
  }
  
  export default Child;
  
  </code></pre>
  
  <p>I also heard there is something like cloning children... I'd like to avoid it if possible.</p>