title: Why does useRef never update current from null?
body: <p><strong>Problem:</strong> cannot get ref to update from {current: null} to the actual ref on the component.</p>
  <p><strong>What i want to happen:</strong> {current: null}, as i understand it, should update to include the div that ref is on in order to be able to click ouside of it (eventually to close it). 9 understand that it does not update on first render, but it does not ever update. It does run twice on page load, both returning current: null.</p>
  <p><strong>What i tried:</strong> i have followed all the SO advice to use useEffect and then finally separating it into this function which appears to be the most appropriate and up to date method to do this. It just never updates current.</p>
  <pre><code>function useOutsideAlerter(ref) {
    useEffect(() =&gt; {
  
      function handleClickOutside(event) {
        if (ref.current &amp;&amp; !ref.current.contains(event.target)) {
          console.log(ref);
        } else {
          console.log(&quot;else&quot;, ref);
        }
      }
      document.addEventListener(&quot;mousedown&quot;, handleClickOutside);
      return () =&gt; {
        document.removeEventListener(&quot;mousedown&quot;, handleClickOutside);
      };
    }, []);
  }
  
  export const Modal = (props) =&gt; {
    const [showModal, setShowModal] = useState(props.showModal);
    const wrapperRef = useRef(null);
    useOutsideAlerter(wrapperRef);
  
    return (
      &lt;Layout&gt;
        &lt;ModalOuter
          showModal={showModal || props.showModal}
          id={styles[&quot;modalOuter&quot;]}
          handleClose={props.handleClose}
        &gt;
          &lt;ModalInner
            ref={wrapperRef}
            handleClose={props.handleClose}
          &gt;
            &lt;Layout display=&quot;flex&quot; flexDirection=&quot;column&quot;&gt;
              &lt;Layout display=&quot;flex&quot; flexDirection=&quot;column&quot;&gt;
                &lt;ModalTitle title={props.title} /&gt;
              &lt;/Layout&gt;
              &lt;HR /&gt;
              &lt;Layout display=&quot;flex&quot; flexDirection=&quot;column&quot;&gt;
                &lt;ModalBody body={props.body} /&gt;
              &lt;/Layout&gt;
            &lt;/Layout&gt;
          &lt;/ModalInner&gt;
        &lt;/ModalOuter&gt;
      &lt;/Layout&gt;
    );
  };
  </code></pre>
  <p>ModalInner</p>
  <pre><code>    export const ModalInner = (props) =&gt; {
    return (
      &lt;Layout
        id={props.id}
        ref={props.ref}
        display=&quot;flex&quot;
        justifyContent=&quot;center&quot;
        alignItems=&quot;center&quot;
        padding=&quot;2rem&quot;
        margin=&quot;2rem&quot;
        backgroundColor=&quot;white&quot;
      &gt;
        {props.children}
      &lt;/Layout&gt;
    );
  };
  </code></pre>
  <p>Layout Component</p>
  <pre><code>export const Layout = (props) =&gt; {
    return (
      &lt;div
        id={props.id}
        ref={props.ref}
  ...
  </code></pre>