Prevent unneeded re-render in discover timeline context

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>
   );

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();
 

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(