title: Make React useEffect hook not run on initial render
body: <p>According to the docs:</p>
  
  <blockquote>
    <p><code>componentDidUpdate()</code> is invoked immediately after updating occurs. This method is not called for the initial render.</p>
  </blockquote>
  
  <p>We can use the new <code>useEffect()</code> hook to simulate <code>componentDidUpdate()</code>, but it seems like <code>useEffect()</code> is being ran after every render, even the first time. How do I get it to not run on initial render?</p>
  
  <p>As you can see in the example below, <code>componentDidUpdateFunction</code> is printed during the initial render but <code>componentDidUpdateClass</code> was not printed during the initial render.</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-js lang-js prettyprint-override"><code>function ComponentDidUpdateFunction() {
    const [count, setCount] = React.useState(0);
    React.useEffect(() =&gt; {
      console.log("componentDidUpdateFunction");
    });
  
    return (
      &lt;div&gt;
        &lt;p&gt;componentDidUpdateFunction: {count} times&lt;/p&gt;
        &lt;button
          onClick={() =&gt; {
            setCount(count + 1);
          }}
        &gt;
          Click Me
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  class ComponentDidUpdateClass extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0,
      };
    }
  
    componentDidUpdate() {
      console.log("componentDidUpdateClass");
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;p&gt;componentDidUpdateClass: {this.state.count} times&lt;/p&gt;
          &lt;button
            onClick={() =&gt; {
              this.setState({ count: this.state.count + 1 });
            }}
          &gt;
            Click Me
          &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(
    &lt;div&gt;
      &lt;ComponentDidUpdateFunction /&gt;
      &lt;ComponentDidUpdateClass /&gt;
    &lt;/div&gt;,
    document.querySelector("#app")
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>