Prevent Event Listener firing event multiple times

Question

I am using this event listener to fire an event which basically updates my state of Interval in a useEffect and enabling me to go up and down in my table. The up and down approach working fine for me but its firing the event multiple times. This multiple times firing of event causing the top and down events works slow and slows over all application.

  useEffect(() => {
    console.log("HAAN MEI WUHI PAPPI HUN");
    document.addEventListener("keyup", (e) => {
      if (e.shiftKey && e.code === "ArrowRight") {
        console.log("shift + right", vjsRef.current.currentTime);
        vjsRef.current.currentTime = vjsRef.current.currentTime + 1;
      } 
      else if (e.shiftKey && e.code === "ArrowLeft") {
        console.log("fire! left", vjsRef.current.currentTime);
        vjsRef.current.currentTime = vjsRef.current.currentTime - 1;
      }
    });

    document.addEventListener("keyup", async(event) => {
      if (event.code === "ArrowUp") {
        console.log('aj mei upar ');
        await props.setSelectInterval(props.selectInterval - 1);
      }
      if (event.code === "ArrowDown") {
        if (props.selectInterval + 1 < props.row.length) {
          console.log('asmaan nichay');
          props.setSelectInterval(props.selectInterval + 1);
        }
      }
    });
  }, []);

Answer 1

In order to make sure listeners are only added once, one thing I do is call removeEventListener before every addListener

console.log("HAAN MEI WUHI PAPPI HUN");
var foo = (e) => {
  if (e.shiftKey && e.code === "ArrowRight") {
    console.log("shift + right", vjsRef.current.currentTime);
    vjsRef.current.currentTime = vjsRef.current.currentTime + 1;
  } 
  else if (e.shiftKey && e.code === "ArrowLeft") {
    console.log("fire! left", vjsRef.current.currentTime);
    vjsRef.current.currentTime = vjsRef.current.currentTime - 1;
  }
}
document.removeEventListener("keyup", foo);
document.addEventListener("keyup", foo);

Answer 2

To avoid React adding multiple event listeners from the one useEffect hook, you can return a cleanup function to remove the event listener within the useEffect hook. The cleanup function will run whenever the component unmounts. eg:

useEffect(() => {
        const yourFunction = () => {console.log('hi')}
        document.addEventListener('keyup', yourFunction)

        return () => {
            document.removeEventListener('keyup', yourFunction)
        }
    }, [])

This is ideal for removing event listeners. You can refer the the cleanup section on the React useEffect hook page: https://reactjs.org/docs/hooks-effect.html