If I perform a cleanup activity after a delay would that affect my working?

Question

Inspired by this post, if we remove the Event Listener in cleanup after a delay does the previous reference of the Event Handler still gets attached to the browser?

Here is the code :

import React from "react";
import "./style.css";
// import React from "react";
// import "./style.css";
import { useState, useEffect,useRef } from 'react';

export default function App() {
  const [userText, setUserText] = useState('');
// Any event handler (function in JS) declared with (){} will be a new
// object in every render. So for every render hanleUserKeyPress is assigned a 
// new reference
  const handleUserKeyPress = event => {
    const { key, keyCode } = event;
    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      // When this function is added as event listener to any browser activity
      // The entire code gets snapshotted i.e for every activity userText would
      // remain same.
      // For any browser activity added to this tag it will see :
      // const handleUserKeyPress = event => {
      //   const { key, keyCode } = event;
      //   if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      //     console.log('Value of userText : ' + '')//Added as snapshot
      //     console.log('Value of userText + key : ' + ''+key)
      //     setUserText(''+key);
      //   }
      // };

      console.log('Value of userText : ' + userText)
      console.log('Value of userText + key : ' + userText+key)
      setUserText(userText+key);
    }
  };


// This runs on every render(no dependency declared). 
  useEffect(() => {
    window.addEventListener('keydown', handleUserKeyPress);
    return () => {
      // Add a delay to see 
      async function fun(){
        await delay();
        window.removeEventListener('keydown', handleUserKeyPress);
      }
      fun();
    };
  });

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
}
function delay(){
  return new Promise(resolve =>{
    setTimeout(()=> resolve(),5000)
  })
}

So when initially the setup runs, React takes snapshot of the userText state inside handleUserKeyPress and is added to keydown event.

When a key is pressed(lets say 'k'), setUserText is called and hence rendering of the component will take place with value (''+'k' = 'k'). After the code gets committed to the browser DOM, cleanup should run. But here, I am providing a delay of 5 seconds. During this time if I am pressing any key the previous version of the Event Handler is still added to keydown event. And hence any key(suppose 'm') that is pressed before 5 seconds gets over, would fire the handleUserKeyPress function with userText as '' and hence console should print 'm' and not 'km'. Also userText should be set as 'm' rather than 'km'.

Where I am getting it wrong?

Answer 1

Your code creates a new "keypress" event listener every time the component renders, and because you are delaying the removal of existing listeners this means that more than 1 keypress event listener can be live and listening at any given moment.

During this time if I am pressing any key the previous version of the Event Handler is still added to keydown event. And hence any key (suppose 'm') that is pressed before 5 seconds gets over, would fire the handleUserKeyPress function with userText as '' and hence console should print 'm' and not 'km'. Also userText should be set as 'm' rather than 'km'.

This is the exact behavior that I think you should expect to see, but I think you are misunderstanding the console logs. Here's some example log output with annotations:

Event	Description
	Component mounts and creates keypress listener #1
"k" pressed	"k" is pressed, keypress listener #1 console logs output "" + "k" -> "k", a userText state update is enqueued to "k", the useEffect hook cleanup function is called and enqueues the timeout, the component rerenders, and keypress listener #2 is added with "k" in closure
within 5 seconds "m" pressed	"m" is pressed, keypress listener #1 console logs output "" + "m" -> "m", a userText state update is enqueued to "m", keypress listener #2 console logs output "k" + "m" -> "km", a userText state update is enqueued to "km", the useEffect hook cleanup function is called and enqueues the timeout, the component rerenders, and keypress listener #3 is added

Each state update simply overwrites the previous state, so you miss the "intermediate" state value of "m" since it's immediately overwritten by "km" and the component rerenders with that current state value.