title: Does a render happen before function in React Hooks useEffect is called?
body: <p>I would have thought that useEffect's first function gets called before the first render, but when I call the method below, my console.log just before the return method call gets called, then the useEffect's first parameter function gets called.</p>
  
  <p>order of calls:</p>
  
  <pre><code>just before render return
  ImageToggleOnScroll.js:8 useEffect before setInView
  ImageToggleOnScroll.js:10 useEffect after setInView
  </code></pre>
  
  <p>Source:    </p>
  
  <pre><code>import React, {useState,useRef,useEffect} from "react";
  
  // primaryImg is black and white, secondaryImg is color
  const ImageToggleOnMouseOver = ({ primaryImg, secondaryImg }) =&gt; {
      const imageRef = useRef(null);
  
      useEffect(() =&gt; {
          console.log('useEffect before setInView')
          setInView(isInView());
          console.log('useEffect after setInView')
          window.addEventListener("scroll", scrollHandler);
  
          return () =&gt; {
              window.removeEventListener("scroll", scrollHandler);
          };
      }, []);
  
      const isInView = () =&gt; {
          if (imageRef.current) {
              const rect = imageRef.current.getBoundingClientRect();
              return rect.top &gt;= 0 &amp;&amp; rect.bottom &lt;= window.innerHeight;
          }
          return false;
      };
  
      const [inView, setInView] = useState(false);
      const scrollHandler = () =&gt; {
          setInView(() =&gt; {
              return isInView();
          });
      };
  
      console.log('just before render return')
      return (
          &lt;img
              ref={imageRef}
              src={inView ? secondaryImg : primaryImg}
              alt="image here"
          /&gt;
      );
  };
  
  export default ImageToggleOnMouseOver;
  </code></pre>