From 2f92c3b9eda89c12b7af08600834a670e5d30e8c Mon Sep 17 00:00:00 2001
From: PhilippeOberti <philippe.oberti@elastic.co>
Date: Thu, 19 Dec 2024 13:08:28 -0600
Subject: [PATCH] [Security Solution] - fixing infinite look on host flyout
 panel due to lack of memoization

---
 .../alerts_by_status/use_alerts_by_status.ts      | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/use_alerts_by_status.ts b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/use_alerts_by_status.ts
index e80f3ec0a0caf..9af905cab8580 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/use_alerts_by_status.ts
+++ b/x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/use_alerts_by_status.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types';
 
 import { useDispatch } from 'react-redux';
@@ -200,12 +200,17 @@ export const useAlertsByStatus: UseAlertsByStatus = ({
     }
   }, [skip, refetchQuery]);
 
-  useQueryInspector({
-    deleteQuery,
-    inspect: {
+  const inspect = useMemo(
+    () => ({
       dsl: [request],
       response: [response],
-    },
+    }),
+    [request, response]
+  );
+
+  useQueryInspector({
+    deleteQuery,
+    inspect,
     refetch,
     setQuery,
     queryId,