[Performance][Security Solution][3/4] - Sourcerer performance (elasti…

…c#212482)

## Summary
Part 3 of elastic#212173

### Testing
For setup see testing section here:
elastic#212173 (comment)

Testing this work is a bit more `console.log` related, as the primary
aim of many of these changes was to limit the amount of re-renders
caused by state changes within many of the sourcerer utils. React is
relatively fast at handling many of these re-renders, but considering
the widespread usage of `useSourcererDataView` and the top level
location of `useInitSourcerer`, it was worth taking care of some low
hanging fruit.

### Background

The changes in this PR centered around limiting the number of re-renders
that were being caused unnecessarily in `useSourcererDataView` and
`useInitSourcerer` by identifying some quick wins.

Comments regarding the changes can be found in the PR diffs

### Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
### Identify risks

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
(cherry picked from commit 98b5280)

x-pack/plugins/security_solution/public/app/home/index.tsx

@@ -13,7 +13,6 @@ import { SecuritySolutionAppWrapper } from '../../common/components/page';
 
 import { HelpMenu } from '../../common/components/help_menu';
 import { getScopeFromPath } from '../../sourcerer/containers/sourcerer_paths';
-import { useSourcererDataView } from '../../sourcerer/containers';
 import { GlobalHeader } from './global_header';
 import { ConsoleManager } from '../../management/components/console/components/console_manager';
 
@@ -34,13 +33,11 @@ interface HomePageProps {
 
 const HomePageComponent: React.FC<HomePageProps> = ({ children }) => {
   const { pathname } = useLocation();
-  useInitSourcerer(getScopeFromPath(pathname));
+  const { browserFields } = useInitSourcerer(getScopeFromPath(pathname));
   useUrlState();
   useUpdateBrowserTitle();
   useUpdateExecutionContext();
 
-  const { browserFields } = useSourcererDataView(getScopeFromPath(pathname));
-
   // side effect: this will attempt to upgrade the endpoint package if it is not up to date
   // this will run when a user navigates to the Security Solution app and when they navigate between
   // tabs in the app. This is useful for keeping the endpoint package as up to date as possible until

x-pack/plugins/security_solution/public/detections/components/user_info/index.tsx

@@ -7,7 +7,7 @@
 
 import { noop } from 'lodash/fp';
 import type { Dispatch } from 'react';
-import React, { useEffect, useReducer, createContext, useContext } from 'react';
+import React, { useEffect, useReducer, createContext, useContext, useMemo } from 'react';
 
 import { useAlertsPrivileges } from '../../containers/detection_engine/alerts/use_alerts_privileges';
 import { useSignalIndex } from '../../containers/detection_engine/alerts/use_signal_index';
@@ -353,19 +353,38 @@ export const useUserInfo = (): State => {
     signalIndexMappingOutdated,
   ]);
 
-  return {
-    loading,
-    isSignalIndexExists,
-    isAuthenticated,
-    hasEncryptionKey,
-    canUserCRUD,
-    canUserREAD,
-    hasIndexManage,
-    hasIndexMaintenance,
-    hasIndexWrite,
-    hasIndexRead,
-    hasIndexUpdateDelete,
-    signalIndexName,
-    signalIndexMappingOutdated,
-  };
+  const userInfo = useMemo(
+    () => ({
+      loading,
+      isSignalIndexExists,
+      isAuthenticated,
+      hasEncryptionKey,
+      canUserCRUD,
+      canUserREAD,
+      hasIndexManage,
+      hasIndexMaintenance,
+      hasIndexWrite,
+      hasIndexRead,
+      hasIndexUpdateDelete,
+      signalIndexName,
+      signalIndexMappingOutdated,
+    }),
+    [
+      canUserCRUD,
+      canUserREAD,
+      hasEncryptionKey,
+      hasIndexMaintenance,
+      hasIndexManage,
+      hasIndexRead,
+      hasIndexUpdateDelete,
+      hasIndexWrite,
+      isAuthenticated,
+      isSignalIndexExists,
+      loading,
+      signalIndexMappingOutdated,
+      signalIndexName,
+    ]
+  );
+
+  return userInfo;
 };

x-pack/plugins/security_solution/public/sourcerer/containers/index.tsx

@@ -67,10 +67,11 @@ export const useSourcererDataView = (
     if (selectedDataView == null || missingPatterns.length > 0) {
       // old way of fetching indices, legacy timeline
       setLegacyPatterns(selectedPatterns);
-    } else {
+    } else if (legacyPatterns.length > 0) {
+      // Only create a new array reference if legacyPatterns is not empty
       setLegacyPatterns([]);
     }
-  }, [missingPatterns, selectedDataView, selectedPatterns]);
+  }, [legacyPatterns.length, missingPatterns, selectedDataView, selectedPatterns]);
 
   const sourcererDataView = useMemo(() => {
     const _dv =

x-pack/plugins/security_solution/public/sourcerer/containers/use_init_sourcerer.tsx

@@ -178,7 +178,7 @@ export const useInitSourcerer = (
       !loadingSignalIndex &&
       signalIndexName != null &&
       signalIndexNameSourcerer == null &&
-      (activeTimeline == null || activeTimeline.savedObjectId == null) &&
+      activeTimeline?.savedObjectId == null &&
       initialTimelineSourcerer.current &&
       defaultDataView.id.length > 0
     ) {
@@ -209,7 +209,7 @@ export const useInitSourcerer = (
       );
     } else if (
       signalIndexNameSourcerer != null &&
-      (activeTimeline == null || activeTimeline.savedObjectId == null) &&
+      activeTimeline?.savedObjectId == null &&
       initialTimelineSourcerer.current &&
       defaultDataView.id.length > 0
     ) {
@@ -240,14 +240,14 @@ export const useInitSourcerer = (
       );
     }
   }, [
-    activeTimeline,
+    activeTimeline?.savedObjectId,
     defaultDataView,
     dispatch,
     loadingSignalIndex,
     signalIndexName,
     signalIndexNameSourcerer,
   ]);
-  const { dataViewId } = useSourcererDataView(scopeId);
+  const { dataViewId, browserFields } = useSourcererDataView(scopeId);
 
   const updateSourcererDataView = useCallback(
     (newSignalsIndex: string) => {
@@ -370,4 +370,11 @@ export const useInitSourcerer = (
     signalIndexName,
     signalIndexNameSourcerer,
   ]);
+
+  return useMemo(
+    () => ({
+      browserFields,
+    }),
+    [browserFields]
+  );
 };