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>(); + const qp = useMemo( + () => new URLSearchParams({ node_ids: nodeIds.join(',') }), + [nodeIds], + ); + const idRef = useRef(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,