Fix missing dependencies and cleanup of addEventListener

This will implement ebba994
and d18e3dd
for the `Compare` and `RemoteQueries` views. These should not be
impacted in the same way as the `VariantAnalysis` view, but this will
make them consistent and more resilient to future changes.

Author: koesie10

extensions/ql-vscode/src/view/compare/Compare.tsx

@@ -31,7 +31,7 @@ export function Compare(_: Record<string, never>): JSX.Element {
   const hasRows = comparison.rows && (comparison.rows.to.length || comparison.rows.from.length);
 
   useEffect(() => {
-    window.addEventListener('message', (evt: MessageEvent) => {
+    const listener = (evt: MessageEvent) => {
       if (evt.origin === window.origin) {
         const msg: ToCompareViewMessage = evt.data;
         switch (msg.t) {
@@ -43,8 +43,13 @@ export function Compare(_: Record<string, never>): JSX.Element {
         const origin = evt.origin.replace(/\n|\r/g, '');
         console.error(`Invalid event origin ${origin}`);
       }
-    });
-  });
+    };
+    window.addEventListener('message', listener);
+
+    return () => {
+      window.removeEventListener('message', listener);
+    };
+  }, []);
   if (!comparison) {
     return <div>Waiting for results to load.</div>;
   }

extensions/ql-vscode/src/view/remote-queries/RemoteQueries.tsx

@@ -395,7 +395,7 @@ export function RemoteQueries(): JSX.Element {
   const [sort, setSort] = useState<Sort>('name');
 
   useEffect(() => {
-    window.addEventListener('message', (evt: MessageEvent) => {
+    const listener = (evt: MessageEvent) => {
       if (evt.origin === window.origin) {
         const msg: ToRemoteQueriesMessage = evt.data;
         if (msg.t === 'setRemoteQueryResult') {
@@ -408,8 +408,13 @@ export function RemoteQueries(): JSX.Element {
         const origin = evt.origin.replace(/\n|\r/g, '');
         console.error(`Invalid event origin ${origin}`);
       }
-    });
-  });
+    };
+    window.addEventListener('message', listener);
+
+    return () => {
+      window.removeEventListener('message', listener);
+    };
+  }, []);
 
   if (!queryResult) {
     return <div>Waiting for results to load.</div>;