title: useEffect runs prior to rendering?
body: <pre><code>export default function Example() {
  
     useEffect(()=&gt;{
         console.log('DOM has not rendered anything yet')
     });
  
      return (
          &lt;div&gt;
              Hello
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>What am I getting with the above code is the console message first and then <code>Hello</code> appears on my page. However, by debugging the code I can see <code>return</code> precedes <code>useEffect</code>. Why then Hello is not visible when <code>useEffect</code> runs for the first time?</p>
  
  <p><a href="https://i.stack.imgur.com/o0ucE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o0ucE.png" alt="enter image description here"></a></p>
  
  <p>Moreover, if using the code from <a href="https://reactjs.org/docs/hooks-effect.html#example-using-hooks" rel="nofollow noreferrer">https://reactjs.org/docs/hooks-effect.html#example-using-hooks</a>:</p>
  
  <pre><code>function Example() {
    const [count, setCount] = useState(0);
  
    useEffect(() =&gt; {
      document.title = `You clicked ${count} times`;
    });
  
    return (
      &lt;div&gt;
        &lt;p&gt;You clicked {count} times&lt;/p&gt;
        &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
          Click me
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>seeing that when callback of useEffect is being executed for the first time, only the button is visible not <code>You clicked 0 times</code>.</p>