fix: memoize agent query params to prevent infinite refetching

app/utils/useAgent.ts

@@ -1,13 +1,20 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useFetcher } from 'react-router';
 import { HostInfo } from '~/types';
 
 export default function useAgent(nodeIds: string[], interval = 3000) {
 	const fetcher = useFetcher<Record<string, HostInfo>>();
+	const qp = useMemo(
+		() => new URLSearchParams({ node_ids: nodeIds.join(',') }),
+		[nodeIds],
+	);
+	const idRef = useRef<string[]>(nodeIds);
 
 	useEffect(() => {
-		const qp = new URLSearchParams({ node_ids: nodeIds.join(',') });
-		fetcher.load(`/api/agent?${qp.toString()}`);
+		if (idRef.current.join(',') !== nodeIds.join(',')) {
+			fetcher.load(`/api/agent?${qp.toString()}`);
+			idRef.current = nodeIds;
+		}
 
 		const intervalID = setInterval(() => {
 			fetcher.load(`/api/agent?${qp.toString()}`);
@@ -16,7 +23,7 @@ export default function useAgent(nodeIds: string[], interval = 3000) {
 		return () => {
 			clearInterval(intervalID);
 		};
-	}, [fetcher, interval, nodeIds]);
+	}, [interval, qp]);
 
 	return {
 		data: fetcher.data,