[HUD] Remove listeners on unmount (#5863)

I think this is something we're supposed to do

torchci/components/LogViewer.tsx

@@ -19,7 +19,14 @@ import { parse } from "ansicolor";
 import { isFailure } from "lib/JobClassifierUtil";
 import { LogSearchResult } from "lib/searchLogs";
 import { JobData, LogAnnotation } from "lib/types";
-import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import useSWRImmutable from "swr";
 import LogAnnotationToggle from "./LogAnnotationToggle";
 
@@ -262,15 +269,20 @@ function LogWithLineSelector({
   // any of the lines.  If another line is selected, the log viewer will jump to
   // that line.  To close it, select currently open line.
 
+  const handleKeyDown = useCallback((e: ClipboardEvent) => {
+    const selection = document.getSelection();
+    e.clipboardData?.setData(
+      "text/plain",
+      (selection?.toString() ?? "").replaceAll(ESC_CHAR_REGEX, "")
+    );
+    e.preventDefault();
+  }, []);
+
   useEffect(() => {
-    document.addEventListener("copy", (e) => {
-      const selection = document.getSelection();
-      e.clipboardData?.setData(
-        "text/plain",
-        (selection?.toString() ?? "").replaceAll(ESC_CHAR_REGEX, "")
-      );
-      e.preventDefault();
-    });
+    document.addEventListener("copy", handleKeyDown);
+    return () => {
+      document.removeEventListener("copy", handleKeyDown);
+    };
   });
   // undefined means that no line is selected, so the log viewer is closed
   const [currentLine, setCurrentLine] = useState<number | undefined>(undefined);

torchci/pages/hud/[repoOwner]/[repoName]/[branch]/[[...page]].tsx

@@ -46,7 +46,13 @@ import useHudData from "lib/useHudData";
 import useTableFilter from "lib/useTableFilter";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import React, { createContext, useContext, useEffect, useState } from "react";
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import useSWR from "swr";
 
 export function JobCell({
@@ -451,12 +457,20 @@ export default function Hud() {
     setPinnedTooltip({ sha: undefined, name: undefined });
   }
 
-  useEffect(() => {
-    document.addEventListener("keydown", (e) => {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
       if (e.code === "Escape") {
         setPinnedTooltip({ sha: undefined, name: undefined });
       }
-    });
+    },
+    [setPinnedTooltip]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
   }, []);
   const title =
     params.repoOwner != null && params.repoName != null && params.branch != null