title: Cannot remove an event listener outside useEffect
body: <p>I add an event listener inside <code>useEffect</code>. It runs once after first rerender due to the <strong>useEffect second argument(<code>[]</code>)</strong>. Then I try to remove it outside <code>useEffect</code> (in handleSearch function) but it doesn't work. I suspect it has something to do with function scopes but don't understand it fully. Maybe there is a workaround?</p>
  
  <pre><code>const handleSearch = () =&gt; {
    window.removeEventListener('resize', setPageHeightWrapper);
  };
  
  const [pageHeight, setPageHeight] = useState(0);
  
  function setPageHeightWrapper() { setPageHeight(window.innerHeight); };
  useEffect(() =&gt;{
    window.addEventListener('resize', setPageHeightWrapper);
    return () =&gt; {
      window.removeEventListener('resize', setPageHeightWrapper);
    };
  }, []);
  </code></pre>