ReactJS - Javascript addEventListener does not remove the listener function at component's unMount

Question

I have added an event listener to "keydown" event in my ReactJS application. Because of a third party library, I'm adding it via setTimeout in a useEffect, this component is like a popup, so it mounts-unmounts lots of times in the app lifecycle. Its like below;

      useEffect(() => {
        const timeoutID = setTimeout(() => {
          clearTimeout(timeoutID);
            window.addEventListener("keydown", theFunction, true);
          
        }, 500);
        
        function theFunction(event: KeyboardEvent) {
           // do something
        }

        return () => {
          window.removeEventListener("keydown", theFunction, true);
        };
      }, []);

It's a typical usage, to remove event listener using removeEventListener method. The problem is, when the component unMounts, the event stays and stacks up on top of another. I'm actually seeing it on the Event Listeners tab on Devtools.

I was suspecting that, every time this component mounts, theFunction changes in the memory, so it's not the same function and therefore React can't remove it. I took theFunction from the useEffect and put it to the top of the component (outside of the functional component definition, just below the imports).

// imports

function theFunction(event: KeyboardEvent) {
               // do something
            }

const Component = () => {
          useEffect(() => {
            const timeoutID = setTimeout(() => {
              clearTimeout(timeoutID);
                window.addEventListener("keydown", theFunction, true);
              
            }, 500);
            
            return () => {
              window.removeEventListener("keydown", theFunction, true);
            };
          }, []);

And voila! The event is now adding just once and does not stack.

I'm not sure is it really beacuse theFunction was not same each time (as I thought) the component unMounts, or is there another React thing that I'm missing. Why React does not removes this eventListener on unMount in this case?

Edit: React version: 16, strict mode is on

Plese use a website like codesandbox to create a demo. I was not able to reproduce your issue. Aslo please mention details like react version and whether strict mode is used — Tushar Shahi
– Tushar Shahi, Commented Jul 8 at 6:59

Estus Flask · Accepted Answer · 2025-07-10 11:47:02Z

1

That this works with theFunction defined outside the component scope can indicate underlying problem. It's revealed in strict mode because it causes an immediate clean up of the effect, which probably would not happen under normal circumstances.

clearTimeout inside setTimeout doesn't serve a good purpose because a timeout has already occurred, but it's necessary on cleanup to avoid race condition that supposedly occurs when a listener that has not been added yet is removed:

  useEffect(() => {
    const timeoutID = setTimeout(() => {
        window.addEventListener("keydown", theFunction, true);          
    }, 500);
    
    function theFunction(event: KeyboardEvent) {
       // do something
    }

    return () => {
      clearTimeout(timeoutID);
      window.removeEventListener("keydown", theFunction, true);
    };
  }, []);

edited Jul 10 at 11:47

answered Jul 8 at 9:51

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS - Javascript addEventListener does not remove the listener function at component's unMount

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related