title: Why is React Component render counter getting incremented by 2?
body: <p>I came across this when I was experimenting with react components. I have a component:</p>
  <pre class="lang-js prettyprint-override"><code>window.renderCount=1;
  
  export function Soundscapes() {
  
      const soundscape = useSelector((s) =&gt; s.tasks.soundscape);
      const dispatch = useDispatch();
     
      const [soundscapeAudioElement, setSoundscapeAudioElement] = useState(undefined);
      useEffect(()=&gt;{
          console.log('state just changed to: ', soundscapeAudioElement )
      },[soundscapeAudioElement])
  
      
      console.log(window.renderCount);
      window.renderCount=window.renderCount+1;
  
      return (&lt;SomeJSXUnrelatedToQuestion/&gt;)
  }
  
  </code></pre>
  <p>In the console, I noticed that the logs are <code>1,3,5,7,9</code> on subsequent re-rendering. I expected it to print <code>renderCount</code> everytime it is <strong>incremented by 1</strong> on the screen like <code>1,2,3,4,5</code>, each time the component got rendered to screen. But it seems to be incrementing it, but not printing it to console everytime.</p>
  <p>Am I missing something here?</p>