perf: optimize event listeners in update viewer and test item components with proper cleanup on unmount

(cherry picked from commit 2e4e939e0b05040c8f38248f3663978a0212cd50)

src/components/test/test-item.tsx

@@ -21,8 +21,6 @@ interface Props {
   onDelete: (uid: string) => void;
 }
 
-let eventListener: UnlistenFn = () => {};
-
 export const TestItem = (props: Props) => {
   const { itemData, onEdit, onDelete: onDeleteItem } = props;
   const {
@@ -42,6 +40,12 @@ export const TestItem = (props: Props) => {
   const [iconCachePath, setIconCachePath] = useState("");
   const { addListener } = useListen();
 
+  const onDelay = async () => {
+    setDelay(-2);
+    const result = await cmdTestDelay(url);
+    setDelay(result);
+  };
+
   useEffect(() => {
     initIconCachePath();
   }, [icon]);
@@ -58,12 +62,6 @@ export const TestItem = (props: Props) => {
     return url.substring(url.lastIndexOf("/") + 1);
   }
 
-  const onDelay = async () => {
-    setDelay(-2);
-    const result = await cmdTestDelay(url);
-    setDelay(result);
-  };
-
   const onEditTest = () => {
     setAnchorEl(null);
     onEdit();
@@ -83,16 +81,27 @@ export const TestItem = (props: Props) => {
     { label: "Delete", handler: onDelete },
   ];
 
-  const listenTsetEvent = async () => {
-    eventListener();
-    eventListener = await addListener("verge://test-all", () => {
-      onDelay();
-    });
-  };
-
   useEffect(() => {
-    listenTsetEvent();
-  }, [url]);
+    let unlistenFn: UnlistenFn | null = null;
+
+    const setupListener = async () => {
+      if (unlistenFn) {
+        unlistenFn();
+      }
+      unlistenFn = await addListener("verge://test-all", () => {
+        onDelay();
+      });
+    };
+
+    setupListener();
+
+    return () => {
+      if (unlistenFn) {
+        console.log(`TestItem for ${props.id} unmounting or url changed, cleaning up test-all listener.`);
+        unlistenFn();
+      }
+    };
+  }, [url, addListener, onDelay, props.id]);
 
   return (
     <Box