From c3ddac42a0c34a7ab6bfae65f6c105491431b9e8 Mon Sep 17 00:00:00 2001
From: Aarnav Tale <aarnavtale@icloud.com>
Date: Tue, 11 Mar 2025 18:16:47 -0400
Subject: [PATCH] fix: memoize agent query params to prevent infinite
 refetching

---
 app/utils/useAgent.ts | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/utils/useAgent.ts b/app/utils/useAgent.ts
index 2be16d7..0d16eb9 100644
--- a/app/utils/useAgent.ts
+++ b/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,