title: Why isn't child's state changing to 'blue'?
body: <p>In this small <a href="https://codesandbox.io/s/hopeful-zhukovsky-47gwk?file=/src/Child.js:172-214" rel="nofollow noreferrer">sandbox</a>, I question why child's state isn't updated to blue when I click on the button. Is it because:</p>
  <p>When a parent (functional) component re-executes (perhaps as a result of its state changing), its child component executes. However, the <code>[state, setState] = useState(newPropFromParent)</code> line, in the child, is not necessarily run again. (That line's only run again when the child's state changes?) Perhaps it's for this reason we're encouraged to store as much state as you can 'at the top' and pass it down as props?</p>
  <p>Same code as sandbox:</p>
  <pre class="lang-js prettyprint-override"><code>export default function App() {
    let [color, setColor] = useState(&quot;red&quot;);
  
    function updateColor() {
      setColor(&quot;blue&quot;);
    }
    return (
      &lt;&gt;
        &lt;button onClick={updateColor}&gt;Change color state to blue.&lt;/button&gt;
        &lt;Child givenColor={color} /&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>export default function Child({ givenColor }) {
    let [color, setColor] = useState(givenColor);
    console.log(&quot;Child function executed&quot;);
    return (
      &lt;&gt;
        &lt;div&gt;{color}&lt;/div&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>P.S. Primarily interested in knowing if my understanding is correct rather than receiving a solution to a hypothetical problem</p>