title: React Hooks render twice
body: <p>I define a scene: we have a component that uses parent's props and itself state.</p>
  
  <p>There are two Components DC and JOKER and my step under the below:</p>
  
  <ol>
  <li>click DC's button</li>
  <li>DC setCount</li>
  <li>JOKER will render with the old state</li>
  <li>running useEffect and setCount</li>
  <li>JOKER does render again</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/xZ288.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/xZ288.jpg" alt="enter image description here"></a></p>
  
  <p>I want to ask why JOKER render twice(step 3 and 5) and the first render squanders the performance. <strong>I just do not want step 3</strong>. <strong>If in class component I can use componentShouldUpdate to avoid it. But Hooks has the same something?</strong></p>
  
  <p>My code under the below, or open this website <a href="https://jsfiddle.net/stephenkingsley/sw5qnjg7/" rel="noreferrer">https://jsfiddle.net/stephenkingsley/sw5qnjg7/</a></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { PureComponent, useState, useEffect, } from 'react';
  
  function JOKER(props) {
    const [count, setCount] = useState(props.count);
    useEffect(() =&gt; {
      console.log('I am JOKER\'s useEffect---&gt;', props.count);
      setCount(props.count);
    }, [props.count]);
  
    console.log('I am JOKER\'s  render--&gt;', count);
    return (
      &lt;div&gt;
        &lt;p style={{ color: 'red' }}&gt;JOKER: You clicked {count} times&lt;/p&gt;
      &lt;/div&gt;
    );
  }
  
  function DC() {
    const [count, setCount] = useState(0);
    return (
      &lt;div&gt;
        &lt;p&gt;You clicked {count} times&lt;/p&gt;
        &lt;button onClick={() =&gt; {
          console.log('\n');
          setCount(count + 1);
        }}&gt;
          Click me
        &lt;/button&gt;
        &lt;JOKER count={count} /&gt;
      &lt;/div&gt;
    );
  }
  
  ReactDOM.render(&lt;DC /&gt;, document.querySelector("#app"))
  </code></pre>