From cd871b2ca492801f1761d448900933f73470d8d8 Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Thu, 26 Aug 2021 11:38:09 +0200 Subject: [PATCH] [ML] Fix useEffects. --- .../failed_transactions_correlations.tsx | 13 +------------ .../app/correlations/latency_correlations.tsx | 13 +------------ .../app/transaction_details/distribution/index.tsx | 14 +------------- .../transaction_distribution_chart/index.tsx | 2 +- ...use_failed_transactions_correlations_fetcher.ts | 10 +++++----- .../hooks/use_transaction_distribution_fetcher.ts | 10 +++++----- ...use_transaction_latency_correlations_fetcher.ts | 10 +++++----- 7 files changed, 19 insertions(+), 53 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/correlations/failed_transactions_correlations.tsx b/x-pack/plugins/apm/public/components/app/correlations/failed_transactions_correlations.tsx index 999bbb555ea6a..4fb7bf5d6fcfb 100644 --- a/x-pack/plugins/apm/public/components/app/correlations/failed_transactions_correlations.tsx +++ b/x-pack/plugins/apm/public/components/app/correlations/failed_transactions_correlations.tsx @@ -102,20 +102,9 @@ export function FailedTransactionsCorrelations({ end, ]); - // start fetching on load and on changing environment useEffect(() => { - if (isRunning) { - cancelFetch(); - } - startFetchHandler(); - - return () => { - // cancel any running async partial request when unmounting the component - cancelFetch(); - }; - // `isRunning` must not be part of the deps check - // eslint-disable-next-line react-hooks/exhaustive-deps + return cancelFetch; }, [cancelFetch, startFetchHandler]); const [ diff --git a/x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx b/x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx index 672c63279acf0..ad8a56a3ac6f9 100644 --- a/x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx +++ b/x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx @@ -106,20 +106,9 @@ export function LatencyCorrelations({ onFilter }: { onFilter: () => void }) { end, ]); - // start fetching on load and on changing environment useEffect(() => { - if (isRunning) { - cancelFetch(); - } - startFetchHandler(); - - return () => { - // cancel any running async partial request when unmounting the component - cancelFetch(); - }; - // `isRunning` must not be part of the deps check - // eslint-disable-next-line react-hooks/exhaustive-deps + return cancelFetch; }, [cancelFetch, startFetchHandler]); useEffect(() => { diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx index 30f074587a8de..2da61bc0fc555 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx @@ -108,7 +108,6 @@ export function TransactionDistribution({ const { error, percentileThresholdValue, - isRunning, startFetch, cancelFetch, transactionDistribution, @@ -136,20 +135,9 @@ export function TransactionDistribution({ end, ]); - // start fetching on load and on changing environment useEffect(() => { - if (isRunning) { - cancelFetch(); - } - startFetchHandler(); - - return () => { - // cancel any running async partial request when unmounting the component - cancelFetch(); - }; - // `isRunning` must not be part of the deps check - // eslint-disable-next-line react-hooks/exhaustive-deps + return cancelFetch; }, [cancelFetch, startFetchHandler]); useEffect(() => { diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx index 217a614e40862..a58a2887b1576 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx @@ -176,7 +176,7 @@ export function TransactionDistributionChart({ ); useEffect(() => { - if (typeof onHasData === 'function') { + if (onHasData) { onHasData(chartLoadingState.hasData); } }, [chartLoadingState, onHasData]); diff --git a/x-pack/plugins/apm/public/hooks/use_failed_transactions_correlations_fetcher.ts b/x-pack/plugins/apm/public/hooks/use_failed_transactions_correlations_fetcher.ts index 7bfba78671448..f12cee7ee0332 100644 --- a/x-pack/plugins/apm/public/hooks/use_failed_transactions_correlations_fetcher.ts +++ b/x-pack/plugins/apm/public/hooks/use_failed_transactions_correlations_fetcher.ts @@ -106,7 +106,7 @@ export const useFailedTransactionsCorrelationsFetcher = () => { setFetchState((prevState) => ({ ...prevState, error: (res as unknown) as Error, - setIsRunning: false, + isRunning: false, })); } }, @@ -114,12 +114,12 @@ export const useFailedTransactionsCorrelationsFetcher = () => { setFetchState((prevState) => ({ ...prevState, error, - setIsRunning: false, + isRunning: false, })); }, }); }, - [data.search] + [data.search, setFetchState] ); const cancelFetch = useCallback(() => { @@ -128,9 +128,9 @@ export const useFailedTransactionsCorrelationsFetcher = () => { abortCtrl.current.abort(); setFetchState((prevState) => ({ ...prevState, - setIsRunning: false, + isRunning: false, })); - }, []); + }, [setFetchState]); return { ...fetchState, diff --git a/x-pack/plugins/apm/public/hooks/use_transaction_distribution_fetcher.ts b/x-pack/plugins/apm/public/hooks/use_transaction_distribution_fetcher.ts index 6471f1f4da7f8..2ff1b83ef1782 100644 --- a/x-pack/plugins/apm/public/hooks/use_transaction_distribution_fetcher.ts +++ b/x-pack/plugins/apm/public/hooks/use_transaction_distribution_fetcher.ts @@ -125,7 +125,7 @@ export function useTransactionDistributionFetcher() { setFetchState((prevState) => ({ ...prevState, error: (res as unknown) as Error, - setIsRunning: false, + isRunning: false, })); } }, @@ -133,12 +133,12 @@ export function useTransactionDistributionFetcher() { setFetchState((prevState) => ({ ...prevState, error, - setIsRunning: false, + isRunning: false, })); }, }); }, - [data.search] + [data.search, setFetchState] ); const cancelFetch = useCallback(() => { @@ -147,9 +147,9 @@ export function useTransactionDistributionFetcher() { abortCtrl.current.abort(); setFetchState((prevState) => ({ ...prevState, - setIsRunning: false, + isRunning: false, })); - }, []); + }, [setFetchState]); return { ...fetchState, diff --git a/x-pack/plugins/apm/public/hooks/use_transaction_latency_correlations_fetcher.ts b/x-pack/plugins/apm/public/hooks/use_transaction_latency_correlations_fetcher.ts index 38d2c7c887d13..d96ef9637ffef 100644 --- a/x-pack/plugins/apm/public/hooks/use_transaction_latency_correlations_fetcher.ts +++ b/x-pack/plugins/apm/public/hooks/use_transaction_latency_correlations_fetcher.ts @@ -127,7 +127,7 @@ export const useTransactionLatencyCorrelationsFetcher = () => { setFetchState((prevState) => ({ ...prevState, error: (res as unknown) as Error, - setIsRunning: false, + isRunning: false, })); } }, @@ -135,12 +135,12 @@ export const useTransactionLatencyCorrelationsFetcher = () => { setFetchState((prevState) => ({ ...prevState, error, - setIsRunning: false, + isRunning: false, })); }, }); }, - [data.search] + [data.search, setFetchState] ); const cancelFetch = useCallback(() => { @@ -149,9 +149,9 @@ export const useTransactionLatencyCorrelationsFetcher = () => { abortCtrl.current.abort(); setFetchState((prevState) => ({ ...prevState, - setIsRunning: false, + isRunning: false, })); - }, []); + }, [setFetchState]); return { ...fetchState,