title: React useEffect and mousedown listener
body: <p>I have a modal that closes if user clicked <strong>outside it</strong>.</p>
  <p><strong>approach one</strong> - passing <code>isModalOpened</code> so the state updates on click only if <code>isModalOpened</code> is true.</p>
  <pre><code>const [isModalOpened, toggleModal] = useState(false);
  const ref = useRef(null);
  
  const clickOut = (e) =&gt; {
    if (!ref.current.contains(e.target) &amp;&amp; isModalOpened) {
       toggleModal(false);
    }
  };
  
  React.useEffect(() =&gt; {
    window.addEventListener('mousedown', clickOut);
  
    return () =&gt; {
       window.removeEventListener('mousedown', clickOut);
    };
  }, [isModalOpened]);
  </code></pre>
  <p><strong>approach two</strong> - removing the <code>isModalOpened</code> from the dep array.</p>
  <pre><code>const [isModalOpened, toggleModal] = useState(false);
  const ref = useRef(null);
  
  const clickOut = (e) =&gt; {
    if (!ref.current.contains(e.target)) {
       toggleModal(false);
    }
  };
  
  React.useEffect(() =&gt; {
    window.addEventListener('mousedown', clickOut);
  
    return () =&gt; {
       window.removeEventListener('mousedown', clickOut);
    };
  }, []);
  </code></pre>
  <p><strong>Question</strong>: should I pass or not to pass the <code>isModalOpened</code> to the dep array?</p>