title: React props state syncing causes unnecessary first re-render
body: <p>I want to create a component Person that is fully controlled by its state. It should also be able to sync the props change (firstName, lastName) passed from its parent component to the state. I have the following code. It does what I want which is syncing props to state and re-render after state has been changed.</p>
  
  <p>However one issue I noticed is that useEffect gets invoked after DOM update triggered by the parent props change. So the initial re-render is wasted since I only want it to re-render after useEffect gets invoked and state is changed.</p>
  
  <pre><code>import React,{useState, useEffect} from 'react';
  
  const Person = ({firstName, lastName}) =&gt;  {
     const [name, setName] = useState(firstName + lastName)
  
     useEffect(() =&gt; {
         setName(firstName + lastName);
         console.log("state changed!");
     }, [firstName, lastName])
  
     console.log("re-render!");
     return &lt;div&gt;render {name}&lt;/div&gt;;
  }
  
  export default Person;
  </code></pre>
  
  <p>I created a simple demo here <a href="https://codesandbox.io/s/sparkling-feather-t8n7m" rel="nofollow noreferrer">https://codesandbox.io/s/sparkling-feather-t8n7m</a>. If you click the re-render button, in the console you will see below output. The first <code>re-render!</code> is triggered by props change which I want to avoid. Any idea how to achieve this? I know there are other solutions such as making it fully uncontrolled, but I'd like to know if there is any workaround to this solution </p>
  
  <pre><code>re-render!
  state changed!
  re-render!
  </code></pre>