From 6639706216934fc65cb9872e4e43c9d35e5474af Mon Sep 17 00:00:00 2001
From: Maxim Palenov <maxim.palenov@elastic.co>
Date: Fri, 3 Jan 2025 15:45:22 +0100
Subject: [PATCH] make threat mapping validation invoking more straightforward

---
 .../threat_match_mapping_field.tsx                  | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/threat_match_mapping_edit/threat_match_mapping_field.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/threat_match_mapping_edit/threat_match_mapping_field.tsx
index 13ec918502a91..7495e202ee452 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/threat_match_mapping_edit/threat_match_mapping_field.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/threat_match_mapping_edit/threat_match_mapping_field.tsx
@@ -8,6 +8,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { EuiFormRow } from '@elastic/eui';
 import type { DataViewBase } from '@kbn/es-query';
+import usePrevious from 'react-use/lib/usePrevious';
 import { createOrNewEntryItem } from '../../../../common/components/threat_match/helpers';
 import type { ThreatMapEntries } from '../../../../common/components/threat_match/types';
 import { ThreatMatchComponent } from '../../../../common/components/threat_match';
@@ -29,6 +30,8 @@ export function ThreatMatchMappingField({
 }: ThreatMatchMappingFieldProps): JSX.Element {
   const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
   const { setValue, validate } = field;
+  const prevIndexTitle = usePrevious(indexPatterns.title);
+  const prevThreatTitle = usePrevious(threatIndexPatterns.title);
 
   // We have to make sure validation runs against the latest source events index patterns
   // and threat match index patterns.
@@ -38,13 +41,13 @@ export function ThreatMatchMappingField({
   // producing invalid validation results.
   //
   // Validating the field imperatively here fixes this issue.
-  //
-  // Additional pitfall here is `validate` function changing its reference every render. Including it
-  // in useEffect's deps leads to infinite re-render.
   useEffect(() => {
+    if (indexPatterns.title === prevIndexTitle && threatIndexPatterns.title === prevThreatTitle) {
+      return;
+    }
+
     validate();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [indexPatterns, threatIndexPatterns]);
+  }, [indexPatterns.title, threatIndexPatterns.title, prevIndexTitle, prevThreatTitle, validate]);
 
   const handleMappingChange = useCallback(
     (entryItems: ThreatMapEntries[]): void => {