title: custom react hook returns default value in initial render
body: <p>I made a hook for <code>intersection observer</code> but it is returning state as <code>false</code> in initial render and then returning true.
  my element is 100% visible to observer but I don't know why it is returning <code>false</code> at initial render.
  any way to solve this ?</p>
  <p>App.js:</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./App.css&quot;;
  import useIntersectionObserver from &quot;./hooks/useIntersectionObserver&quot;;
  const App = () =&gt; {
    const Ref = React.useRef(null);
    const { observer, state } = useIntersectionObserver({ rootMargin: &quot;10px&quot; });
    React.useEffect(() =&gt; {
      observer.observe(Ref.current);
      console.log(state);
    }, [observer, state]);
    return (
      &lt;&gt;
        &lt;h1 ref={Ref}&gt;Hello World&lt;/h1&gt;
        &lt;h3&gt;Text&lt;/h3&gt;
      &lt;/&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p><code>useIntersectionObserver</code> custom hook:</p>
  <pre><code>import React from &quot;react&quot;;
  
  const useIntersectionObserver = ({ options }) =&gt; {
    const [state, setState] = React.useState(false);
    function callbackfn(entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          setState(true);
        } else {
          setState(false);
        }
      });
    }
    const observer = new IntersectionObserver(callbackfn, options);
    return { observer, state };
  };
  
  export default useIntersectionObserver;
  </code></pre>
  <p>it will give you this, in console:
  <a href="https://i.stack.imgur.com/PaLkz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PaLkz.png" alt="enter image description here" /></a></p>