This is an automated email from the ASF dual-hosted git repository. marat pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit 2c4df962daeb9438bc8ea73d9ff5d359741afd0c Author: Marat Gubaidullin <[email protected]> AuthorDate: Fri Feb 27 16:25:57 2026 -0500 Front-end Poller for 4.18.0 --- .../src/karavan/shared/polling/useDataPolling.ts | 48 ++++++++++++---------- 1 file changed, 27 insertions(+), 21 deletions(-) diff --git a/karavan-app/src/main/webui/src/karavan/shared/polling/useDataPolling.ts b/karavan-app/src/main/webui/src/karavan/shared/polling/useDataPolling.ts index a1502ee5..fc868018 100644 --- a/karavan-app/src/main/webui/src/karavan/shared/polling/useDataPolling.ts +++ b/karavan-app/src/main/webui/src/karavan/shared/polling/useDataPolling.ts @@ -1,34 +1,40 @@ -// useDataPolling.ts +import {useEffect, useMemo, useRef} from "react"; +import {startPolling, stopPolling} from "./PollingManager"; -import {useCallback, useEffect, useMemo} from 'react'; -import {startPolling, stopPolling} from './PollingManager'; // Assuming PollingManager has been implemented - -/** - * Custom hook to manage periodic data fetching with a DYNAMIC interval. - * @param pollingKey A unique string identifier (e.g., 'metrics'). - * @param fetchAction The function that performs the data fetch. - * @param interval The current polling interval in milliseconds (can change). - */ export const useDataPolling = ( pollingKey: string, fetchAction: () => void, - interval: number + interval: number, + dependencies: any[] = [] ): void => { - - // The polling ID remains constant, based only on the key. const pollingId = useMemo(() => pollingKey, [pollingKey]); - const stableFetchAction = useCallback(fetchAction, [fetchAction]); + // 1. Store the fetchAction in a mutable ref. + // This allows the timer to always call the latest version of the action + // without being listed as a dependency in the useEffect below. + const fetchRef = useRef(fetchAction); + + // 2. Update the ref every time the component renders with a new fetchAction. + useEffect(() => { + fetchRef.current = fetchAction; + }, [fetchAction]); + + // 3. Manage the PollingManager lifecycle. useEffect(() => { - // Start polling (or restart if interval has changed) - startPolling(pollingId, stableFetchAction, interval); + // We create a wrapper that points to the current ref value. + // This wrapper is what the PollingManager's setInterval will execute. + const timerRunner = () => { + fetchRef.current(); + }; - // Cleanup: Runs when the component unmounts OR if dependencies change. + // Start (or increment reference count) + startPolling(pollingId, timerRunner, interval); + + // Stop (or decrement reference count) return () => { - // When dependencies (like interval) change, the OLD timer is stopped - // and the NEW one is started immediately in the next step. stopPolling(pollingId); }; - - }, [pollingId, stableFetchAction, interval]); // Interval is now a dependency + }, [pollingId, interval, ...dependencies]); + // 🌟 NOTICE: fetchAction is NOT a dependency here. + // This prevents the "constant start/stop" cycle. }; \ No newline at end of file
