From e76cfd3d930b602c998f21c63cb3fbb0b9d50f7b Mon Sep 17 00:00:00 2001
From: Kevin Qualters <kevin.qualters@elastic.co>
Date: Thu, 26 Oct 2023 22:22:02 +0000
Subject: [PATCH] Prevent unneeded re-render in discover timeline context

---
 .../discover_in_timeline/provider.tsx          | 18 ++++++++++--------
 .../use_discover_in_timeline_actions.tsx       |  8 ++------
 .../timelines/store/timeline/selectors.ts      |  5 +++++
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/discover_in_timeline/provider.tsx b/x-pack/plugins/security_solution/public/common/components/discover_in_timeline/provider.tsx
index abf03e6b4f466..4012f0a9ad7dc 100644
--- a/x-pack/plugins/security_solution/public/common/components/discover_in_timeline/provider.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/discover_in_timeline/provider.tsx
@@ -7,7 +7,7 @@
 
 import type { DiscoverStateContainer } from '@kbn/discover-plugin/public';
 import type { PropsWithChildren, FC } from 'react';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useMemo } from 'react';
 import { DiscoverInTimelineContext } from './context';
 import { useDiscoverInTimelineActions } from './use_discover_in_timeline_actions';
 
@@ -24,14 +24,16 @@ export const DiscoverInTimelineContextProvider: FC<DiscoverInTimelineContextProv
     discoverStateContainer.current = stateContainer;
   }, []);
 
+  const discoverInTimelineContext = useMemo(() => {
+    return {
+      discoverStateContainer,
+      setDiscoverStateContainer,
+      ...actions,
+    };
+  }, [actions, setDiscoverStateContainer]);
+
   return (
-    <DiscoverInTimelineContext.Provider
-      value={{
-        discoverStateContainer,
-        setDiscoverStateContainer,
-        ...actions,
-      }}
-    >
+    <DiscoverInTimelineContext.Provider value={discoverInTimelineContext}>
       {props.children}
     </DiscoverInTimelineContext.Provider>
   );
diff --git a/x-pack/plugins/security_solution/public/common/components/discover_in_timeline/use_discover_in_timeline_actions.tsx b/x-pack/plugins/security_solution/public/common/components/discover_in_timeline/use_discover_in_timeline_actions.tsx
index d6acd1ce7ffc9..23c12e5b2cd77 100644
--- a/x-pack/plugins/security_solution/public/common/components/discover_in_timeline/use_discover_in_timeline_actions.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/discover_in_timeline/use_discover_in_timeline_actions.tsx
@@ -9,7 +9,7 @@ import type { DiscoverStateContainer } from '@kbn/discover-plugin/public';
 import type { SaveSavedSearchOptions } from '@kbn/saved-search-plugin/public';
 import type { RefObject } from 'react';
 import { useMemo, useCallback } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import type { SavedSearch } from '@kbn/saved-search-plugin/common';
 import type { DiscoverAppState } from '@kbn/discover-plugin/public/application/main/services/discover_app_state_container';
 import type { TimeRange } from '@kbn/es-query';
@@ -51,11 +51,7 @@ export const useDiscoverInTimelineActions = (
 
   const { dataViewId } = useSourcererDataView(SourcererScopeName.detections);
 
-  const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
-  const timeline = useShallowEqualSelector(
-    (state) => getTimeline(state, TimelineId.active) ?? timelineDefaults
-  );
-  const { savedSearchId } = timeline;
+  const savedSearchId = useSelector(timelineSelectors.savedSearchId);
 
   const queryClient = useQueryClient();
 
diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/selectors.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/selectors.ts
index ed0d3c0898a72..b062bfb325322 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/timeline/selectors.ts
+++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/selectors.ts
@@ -7,6 +7,7 @@
 
 import { createSelector } from 'reselect';
 import type { State } from '../../../common/store/types';
+import { TimelineId } from '../../../../common/types';
 
 import type { TimelineModel } from './model';
 import type { AutoSavedWarningMsg, InsertTimeline, TimelineById } from './types';
@@ -24,6 +25,10 @@ export const selectTimeline = (state: State, timelineId: string): TimelineModel
 export const selectInsertTimeline = (state: State): InsertTimeline | null =>
   state.timeline.insertTimeline;
 
+export const savedSearchId = createSelector(selectTimelineById, (timeline) =>
+  timeline[TimelineId.active] ? timeline[TimelineId.active].savedSearchId : null
+);
+
 export const autoSaveMsgSelector = createSelector(selectAutoSaveMsg, (autoSaveMsg) => autoSaveMsg);
 
 export const timelineByIdSelector = createSelector(