fix: memoize agent query params to prevent infinite refetching
This commit is contained in:
parent
01f432cedc
commit
c3ddac42a0
@ -1,13 +1,20 @@
|
|||||||
import { useEffect } from 'react';
|
import { useEffect, useMemo, useRef } from 'react';
|
||||||
import { useFetcher } from 'react-router';
|
import { useFetcher } from 'react-router';
|
||||||
import { HostInfo } from '~/types';
|
import { HostInfo } from '~/types';
|
||||||
|
|
||||||
export default function useAgent(nodeIds: string[], interval = 3000) {
|
export default function useAgent(nodeIds: string[], interval = 3000) {
|
||||||
const fetcher = useFetcher<Record<string, HostInfo>>();
|
const fetcher = useFetcher<Record<string, HostInfo>>();
|
||||||
|
const qp = useMemo(
|
||||||
|
() => new URLSearchParams({ node_ids: nodeIds.join(',') }),
|
||||||
|
[nodeIds],
|
||||||
|
);
|
||||||
|
const idRef = useRef<string[]>(nodeIds);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const qp = new URLSearchParams({ node_ids: nodeIds.join(',') });
|
if (idRef.current.join(',') !== nodeIds.join(',')) {
|
||||||
fetcher.load(`/api/agent?${qp.toString()}`);
|
fetcher.load(`/api/agent?${qp.toString()}`);
|
||||||
|
idRef.current = nodeIds;
|
||||||
|
}
|
||||||
|
|
||||||
const intervalID = setInterval(() => {
|
const intervalID = setInterval(() => {
|
||||||
fetcher.load(`/api/agent?${qp.toString()}`);
|
fetcher.load(`/api/agent?${qp.toString()}`);
|
||||||
@ -16,7 +23,7 @@ export default function useAgent(nodeIds: string[], interval = 3000) {
|
|||||||
return () => {
|
return () => {
|
||||||
clearInterval(intervalID);
|
clearInterval(intervalID);
|
||||||
};
|
};
|
||||||
}, [fetcher, interval, nodeIds]);
|
}, [interval, qp]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
data: fetcher.data,
|
data: fetcher.data,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user