[7.x] [SIEM] Fix unnecessary re-renders on the Overview page (#56587)

x-pack/legacy/plugins/siem/public/components/charts/areachart.test.tsx

@@ -331,7 +331,7 @@ describe('AreaChart', () => {
     });
 
     it(`should render area chart`, () => {
-      expect(shallowWrapper.find('WrappedByAutoSizer')).toHaveLength(1);
+      expect(shallowWrapper.find('AreaChartBase')).toHaveLength(1);
       expect(shallowWrapper.find('ChartPlaceHolder')).toHaveLength(0);
     });
   });
@@ -344,7 +344,7 @@ describe('AreaChart', () => {
       });
 
       it(`should render a chart place holder`, () => {
-        expect(shallowWrapper.find('WrappedByAutoSizer')).toHaveLength(0);
+        expect(shallowWrapper.find('AreaChartBase')).toHaveLength(0);
         expect(shallowWrapper.find('ChartPlaceHolder')).toHaveLength(1);
       });
     }

x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx

@@ -146,8 +146,4 @@ export const AreaChartComponent: React.FC<AreaChartComponentProps> = ({ areaChar
   );
 };
 
-AreaChartComponent.displayName = 'AreaChartComponent';
-
 export const AreaChart = React.memo(AreaChartComponent);
-
-AreaChart.displayName = 'AreaChart';

x-pack/legacy/plugins/siem/public/components/charts/barchart.test.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 
 import { BarChartBaseComponent, BarChartComponent } from './barchart';
 import { ChartSeriesData } from './common';
-import { BarSeries, ScaleType, Axis } from '@elastic/charts';
+import { Chart, BarSeries, Axis, ScaleType } from '@elastic/charts';
 
 jest.mock('../../lib/kibana');
 
@@ -139,7 +139,7 @@ describe('BarChartBaseComponent', () => {
     });
 
     it('should render two bar series', () => {
-      expect(shallowWrapper.find('Chart')).toHaveLength(1);
+      expect(shallowWrapper.find(Chart)).toHaveLength(1);
     });
   });
 
@@ -167,7 +167,6 @@ describe('BarChartBaseComponent', () => {
     });
 
     it(`should ${mockBarChartData.length} render BarSeries`, () => {
-      expect(shallow).toMatchSnapshot();
       expect(shallowWrapper.find(BarSeries)).toHaveLength(mockBarChartData.length);
     });
 
@@ -265,7 +264,7 @@ describe('BarChartBaseComponent', () => {
     });
 
     it('should not render without height and width', () => {
-      expect(shallowWrapper.find('Chart')).toHaveLength(0);
+      expect(shallowWrapper.find(Chart)).toHaveLength(0);
     });
   });
 });
@@ -278,7 +277,7 @@ describe.each(chartDataSets)('BarChart with valid data [%o]', data => {
   });
 
   it(`should render chart`, () => {
-    expect(shallowWrapper.find('WrappedByAutoSizer')).toHaveLength(1);
+    expect(shallowWrapper.find('BarChartBase')).toHaveLength(1);
     expect(shallowWrapper.find('ChartPlaceHolder')).toHaveLength(0);
   });
 });
@@ -291,7 +290,7 @@ describe.each(chartHolderDataSets)('BarChart with invalid data [%o]', data => {
   });
 
   it(`should render a ChartPlaceHolder`, () => {
-    expect(shallowWrapper.find('WrappedByAutoSizer')).toHaveLength(0);
+    expect(shallowWrapper.find('BarChartBase')).toHaveLength(0);
     expect(shallowWrapper.find('ChartPlaceHolder')).toHaveLength(1);
   });
 });

x-pack/legacy/plugins/siem/public/components/charts/common.tsx

@@ -16,7 +16,9 @@ import {
   TickFormatter,
   Position,
 } from '@elastic/charts';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
+
 import { useUiSetting } from '../../lib/kibana';
 import { DEFAULT_DARK_MODE } from '../../../common/constants';
 
@@ -54,7 +56,7 @@ export interface ChartSeriesData {
   color?: string | undefined;
 }
 
-export const WrappedByAutoSizer = styled.div<{ height?: string }>`
+const WrappedByAutoSizerComponent = styled.div<{ height?: string }>`
   ${style =>
     `
     height: ${style.height != null ? style.height : defaultChartHeight};
@@ -66,7 +68,9 @@ export const WrappedByAutoSizer = styled.div<{ height?: string }>`
   }
 `;
 
-WrappedByAutoSizer.displayName = 'WrappedByAutoSizer';
+WrappedByAutoSizerComponent.displayName = 'WrappedByAutoSizer';
+
+export const WrappedByAutoSizer = React.memo(WrappedByAutoSizerComponent);
 
 export enum SeriesType {
   BAR = 'bar',
@@ -96,8 +100,9 @@ const theme: PartialTheme = {
 export const useTheme = () => {
   const isDarkMode = useUiSetting<boolean>(DEFAULT_DARK_MODE);
   const defaultTheme = isDarkMode ? DARK_THEME : LIGHT_THEME;
+  const themeValue = useMemo(() => mergeWithDefaultTheme(theme, defaultTheme), []);
 
-  return mergeWithDefaultTheme(theme, defaultTheme);
+  return themeValue;
 };
 
 export const chartDefaultSettings = {

x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { isEqual } from 'lodash/fp';
 import React, { createContext, useContext, useEffect } from 'react';
 import {
   Draggable,
@@ -14,6 +13,7 @@ import {
 } from 'react-beautiful-dnd';
 import { connect, ConnectedProps } from 'react-redux';
 import styled from 'styled-components';
+import deepEqual from 'fast-deep-equal';
 
 import { EuiPortal } from '@elastic/eui';
 import { dragAndDropActions } from '../../store/drag_and_drop';
@@ -122,7 +122,7 @@ const DraggableWrapperComponent = React.memo<Props>(
   },
   (prevProps, nextProps) => {
     return (
-      isEqual(prevProps.dataProvider, nextProps.dataProvider) &&
+      deepEqual(prevProps.dataProvider, nextProps.dataProvider) &&
       prevProps.render !== nextProps.render &&
       prevProps.truncate === nextProps.truncate
     );

x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx

@@ -5,10 +5,10 @@
  */
 
 import { EuiPanel } from '@elastic/eui';
-import deepEqual from 'fast-deep-equal';
-import { getOr, isEmpty, isEqual, union } from 'lodash/fp';
+import { getOr, isEmpty, union } from 'lodash/fp';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
+import deepEqual from 'fast-deep-equal';
 import useResizeObserver from 'use-resize-observer/polyfilled';
 
 import { BrowserFields } from '../../containers/source';
@@ -228,7 +228,7 @@ const EventsViewerComponent: React.FC<Props> = ({
 export const EventsViewer = React.memo(
   EventsViewerComponent,
   (prevProps, nextProps) =>
-    isEqual(prevProps.browserFields, nextProps.browserFields) &&
+    deepEqual(prevProps.browserFields, nextProps.browserFields) &&
     prevProps.columns === nextProps.columns &&
     prevProps.dataProviders === nextProps.dataProviders &&
     prevProps.deletedEventIds === nextProps.deletedEventIds &&
@@ -241,9 +241,9 @@ export const EventsViewer = React.memo(
     prevProps.itemsPerPage === nextProps.itemsPerPage &&
     prevProps.itemsPerPageOptions === nextProps.itemsPerPageOptions &&
     prevProps.kqlMode === nextProps.kqlMode &&
-    isEqual(prevProps.query, nextProps.query) &&
+    deepEqual(prevProps.query, nextProps.query) &&
     prevProps.start === nextProps.start &&
     prevProps.sort === nextProps.sort &&
-    isEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) &&
+    deepEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) &&
     prevProps.utilityBar === nextProps.utilityBar
 );

x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx

@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { isEqual } from 'lodash/fp';
 import React, { useCallback, useMemo, useEffect } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
+import deepEqual from 'fast-deep-equal';
 
 import { inputsModel, inputsSelectors, State, timelineSelectors } from '../../store';
 import { inputsActions, timelineActions } from '../../store/actions';
@@ -197,23 +197,23 @@ export const StatefulEventsViewer = connector(
     StatefulEventsViewerComponent,
     (prevProps, nextProps) =>
       prevProps.id === nextProps.id &&
-      isEqual(prevProps.columns, nextProps.columns) &&
-      isEqual(prevProps.dataProviders, nextProps.dataProviders) &&
+      deepEqual(prevProps.columns, nextProps.columns) &&
+      deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
       prevProps.deletedEventIds === nextProps.deletedEventIds &&
       prevProps.end === nextProps.end &&
-      isEqual(prevProps.filters, nextProps.filters) &&
+      deepEqual(prevProps.filters, nextProps.filters) &&
       prevProps.isLive === nextProps.isLive &&
       prevProps.itemsPerPage === nextProps.itemsPerPage &&
-      isEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) &&
+      deepEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) &&
       prevProps.kqlMode === nextProps.kqlMode &&
-      isEqual(prevProps.query, nextProps.query) &&
-      isEqual(prevProps.sort, nextProps.sort) &&
+      deepEqual(prevProps.query, nextProps.query) &&
+      deepEqual(prevProps.sort, nextProps.sort) &&
       prevProps.start === nextProps.start &&
-      isEqual(prevProps.pageFilters, nextProps.pageFilters) &&
+      deepEqual(prevProps.pageFilters, nextProps.pageFilters) &&
       prevProps.showCheckboxes === nextProps.showCheckboxes &&
       prevProps.showRowRenderers === nextProps.showRowRenderers &&
       prevProps.start === nextProps.start &&
-      isEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) &&
+      deepEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) &&
       prevProps.utilityBar === nextProps.utilityBar
   )
 );

x-pack/legacy/plugins/siem/public/components/flyout/index.tsx

@@ -6,7 +6,7 @@
 
 import { EuiBadge } from '@elastic/eui';
 import { defaultTo, getOr } from 'lodash/fp';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import styled from 'styled-components';
 
@@ -58,28 +58,39 @@ export const FlyoutComponent = React.memo<Props>(
     timelineId,
     usersViewing,
     width,
-  }) => (
-    <>
-      <Visible show={show}>
-        <Pane
-          flyoutHeight={flyoutHeight}
-          headerHeight={headerHeight}
-          onClose={() => showTimeline({ id: timelineId, show: false })}
+  }) => {
+    const handleClose = useCallback(() => showTimeline({ id: timelineId, show: false }), [
+      showTimeline,
+      timelineId,
+    ]);
+    const handleOpen = useCallback(() => showTimeline({ id: timelineId, show: true }), [
+      showTimeline,
+      timelineId,
+    ]);
+
+    return (
+      <>
+        <Visible show={show}>
+          <Pane
+            flyoutHeight={flyoutHeight}
+            headerHeight={headerHeight}
+            onClose={handleClose}
+            timelineId={timelineId}
+            usersViewing={usersViewing}
+            width={width}
+          >
+            {children}
+          </Pane>
+        </Visible>
+        <FlyoutButton
+          dataProviders={dataProviders!}
+          show={!show}
           timelineId={timelineId}
-          usersViewing={usersViewing}
-          width={width}
-        >
-          {children}
-        </Pane>
-      </Visible>
-      <FlyoutButton
-        dataProviders={dataProviders!}
-        show={!show}
-        timelineId={timelineId}
-        onOpen={() => showTimeline({ id: timelineId, show: true })}
-      />
-    </>
-  )
+          onOpen={handleOpen}
+        />
+      </>
+    );
+  }
 );
 
 FlyoutComponent.displayName = 'FlyoutComponent';

x-pack/legacy/plugins/siem/public/components/inspect/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui';
-import { getOr } from 'lodash/fp';
+import { getOr, omit } from 'lodash/fp';
 import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
 import { ActionCreator } from 'typescript-fsa';
@@ -162,7 +162,11 @@ const makeMapStateToProps = () => {
   const getGlobalQuery = inputsSelectors.globalQueryByIdSelector();
   const getTimelineQuery = inputsSelectors.timelineQueryByIdSelector();
   const mapStateToProps = (state: State, { inputId = 'global', queryId }: OwnProps) => {
-    return inputId === 'global' ? getGlobalQuery(state, queryId) : getTimelineQuery(state, queryId);
+    const props =
+      inputId === 'global' ? getGlobalQuery(state, queryId) : getTimelineQuery(state, queryId);
+    // refetch caused unnecessary component rerender and it was even not used
+    const propsWithoutRefetch = omit('refetch', props);
+    return propsWithoutRefetch;
   };
   return mapStateToProps;
 };

x-pack/legacy/plugins/siem/public/components/navigation/index.tsx

@@ -4,11 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import isEqual from 'lodash/fp/isEqual';
-import deepEqual from 'fast-deep-equal';
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
+import deepEqual from 'fast-deep-equal';
 
 import { useKibana } from '../../lib/kibana';
 import { RouteSpyState } from '../../utils/route/types';
@@ -81,8 +80,8 @@ export const SiemNavigationRedux = compose<
     (prevProps, nextProps) =>
       prevProps.pathName === nextProps.pathName &&
       prevProps.search === nextProps.search &&
-      isEqual(prevProps.navTabs, nextProps.navTabs) &&
-      isEqual(prevProps.urlState, nextProps.urlState) &&
+      deepEqual(prevProps.navTabs, nextProps.navTabs) &&
+      deepEqual(prevProps.urlState, nextProps.urlState) &&
       deepEqual(prevProps.state, nextProps.state)
   )
 );

x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/index.tsx

@@ -7,7 +7,7 @@
 /* eslint-disable react/display-name */
 
 import { has } from 'lodash/fp';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { hostsActions } from '../../../../store/hosts';
@@ -100,10 +100,12 @@ const AuthenticationTableComponent = React.memo<AuthenticationTableProps>(
       [type, updateTableActivePage]
     );
 
+    const columns = useMemo(() => getAuthenticationColumnsCurated(type), [type]);
+
     return (
       <PaginatedTable
         activePage={activePage}
-        columns={getAuthenticationColumnsCurated(type)}
+        columns={columns}
         dataTestSubj={`table-${tableType}`}
         headerCount={totalCount}
         headerTitle={i18n.AUTHENTICATIONS}

x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.tsx

@@ -7,6 +7,7 @@
 import React, { useMemo, useCallback } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { IIndexPattern } from 'src/plugins/data/public';
+
 import { hostsActions } from '../../../../store/actions';
 import {
   Direction,

x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/index.tsx

@@ -7,6 +7,7 @@
 import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
+
 import { KpiHostsData, KpiHostDetailsData } from '../../../../graphql/types';
 import { StatItemsComponent, StatItemsProps, useKpiMatrixStatus } from '../../../stat_items';
 import { kpiHostsMapping } from './kpi_hosts_mapping';