In React Hooks documents it is shown how to removeEventListener during the component&#39;s cleanup phase. https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

In my use case, I am trying to removeEventListener conditional to a state property of the functional component.

Here&#39;s an example where the component is never unmounted but the event listener should be removed:

    function App () {
      const [collapsed, setCollapsed] = React.useState(true);

      React.useEffect(
        () =&gt; {
          if (collapsed) {
            window.removeEventListener(&#39;keyup&#39;, handleKeyUp); // Not the same &quot;handleKeyUp&quot; :(
          } else {
            window.addEventListener(&#39;keyup&#39;, handleKeyUp);
          }
        },
        [collapsed]
      );

      function handleKeyUp(event) {
        console.log(event.key);
        switch (event.key) {
          case &#39;Escape&#39;:
            setCollapsed(true);
            break;
        }
      }
    
      return collapsed ? (
        &lt;a href=&quot;javascript:;&quot; onClick={()=&gt;setCollapsed(false)}&gt;Search&lt;/a&gt;
      ) : (
        &lt;span&gt;
          &lt;input placeholder=&quot;Search&quot; autoFocus /&gt;&amp;nbsp;
          &lt;a href=&quot;javascript:;&quot;&gt;This&lt;/a&gt;&amp;nbsp;
          &lt;a href=&quot;javascript:;&quot;&gt;That&lt;/a&gt;&amp;nbsp;
          &lt;input placeholder=&quot;Refinement&quot; /&gt;
        &lt;/span&gt;
      );
    }
    ReactDOM.render(&lt;App /&gt;, document.body.appendChild(document.createElement(&#39;div&#39;)));

(Live sample at https://codepen.io/caqu/pen/xBeBMN)

The problem I see is that the `handleKeyUp` reference inside `removeEventListener` is changing every time the component renders. The function `handleKeyUp` needs a reference to `setCollapsed` so it must be enclosed by `App`. Moving `handleKeyUp` inside `useEffect` also seems to fire multiple times and lose the reference to the original `handleKeyUp`.

How can I conditionally window.removeEventListener using React Hooks without unmounting the component?



All Removeeventlistener Solutions on Gang of Coders

Total of 1 Removeeventlistener Solutions

How do I window removeEventListener using React useEffect