[Security Solution] Refactor useSelector (#75297)

Author: patrykkopycinski

x-pack/plugins/security_solution/public/cases/components/use_all_cases_modal/index.tsx

@@ -5,13 +5,13 @@
  */
 
 import React, { useState, useCallback, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
 
-import { useDispatch, useSelector } from 'react-redux';
+import { useShallowEqualSelector } from '../../../common/hooks/use_selector';
 import { APP_ID } from '../../../../common/constants';
 import { SecurityPageName } from '../../../app/types';
 import { useKibana } from '../../../common/lib/kibana';
 import { getCaseDetailsUrl, getCreateCaseUrl } from '../../../common/components/link_to';
-import { State } from '../../../common/store';
 import { setInsertTimeline } from '../../../timelines/store/timeline/actions';
 import { timelineSelectors } from '../../../timelines/store/timeline';
 
@@ -34,7 +34,7 @@ export const useAllCasesModal = ({
 }: UseAllCasesModalProps): UseAllCasesModalReturnedValues => {
   const dispatch = useDispatch();
   const { navigateToApp } = useKibana().services.application;
-  const timeline = useSelector((state: State) =>
+  const timeline = useShallowEqualSelector((state) =>
     timelineSelectors.selectTimeline(state, timelineId)
   );
 

x-pack/plugins/security_solution/public/common/components/navigation/use_get_url_search.tsx

@@ -4,17 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { isEqual } from 'lodash/fp';
 import { useMemo } from 'react';
-import { useSelector } from 'react-redux';
 
+import { useDeepEqualSelector } from '../../hooks/use_selector';
 import { makeMapStateToProps } from '../url_state/helpers';
 import { getSearch } from './helpers';
 import { SearchNavTab } from './types';
 
 export const useGetUrlSearch = (tab: SearchNavTab) => {
   const mapState = makeMapStateToProps();
-  const { urlState } = useSelector(mapState, isEqual);
+  const { urlState } = useDeepEqualSelector(mapState);
   const urlSearch = useMemo(() => getSearch(tab, urlState), [tab, urlState]);
   return urlSearch;
 };

x-pack/plugins/security_solution/public/common/containers/source/index.tsx

@@ -8,7 +8,7 @@ import { set } from '@elastic/safer-lodash-set/fp';
 import { keyBy, pick, isEmpty, isEqual, isUndefined } from 'lodash/fp';
 import memoizeOne from 'memoize-one';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { IIndexPattern } from 'src/plugins/data/public';
 
 import { useKibana } from '../../lib/kibana';
@@ -20,11 +20,10 @@ import {
   BrowserFields,
 } from '../../../../common/search_strategy/index_fields';
 import { AbortError } from '../../../../../../../src/plugins/data/common';
+import { useShallowEqualSelector } from '../../../common/hooks/use_selector';
 import * as i18n from './translations';
 import { SourcererScopeName } from '../../store/sourcerer/model';
 import { sourcererActions, sourcererSelectors } from '../../store/sourcerer';
-
-import { State } from '../../store';
 import { DocValueFields } from '../../../../common/search_strategy/common';
 
 export { BrowserField, BrowserFields, DocValueFields };
@@ -201,9 +200,8 @@ export const useIndexFields = (sourcererScopeName: SourcererScopeName) => {
     () => sourcererSelectors.getIndexNamesSelectedSelector(),
     []
   );
-  const indexNames = useSelector<State, string[]>(
-    (state) => indexNamesSelectedSelector(state, sourcererScopeName),
-    shallowEqual
+  const indexNames = useShallowEqualSelector<string[]>((state) =>
+    indexNamesSelectedSelector(state, sourcererScopeName)
   );
 
   const setLoading = useCallback(

x-pack/plugins/security_solution/public/common/containers/use_full_screen/index.tsx

@@ -5,9 +5,10 @@
  */
 
 import { useCallback, useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { SCROLLING_DISABLED_CLASS_NAME } from '../../../../common/constants';
+import { useDispatch } from 'react-redux';
 
+import { SCROLLING_DISABLED_CLASS_NAME } from '../../../../common/constants';
+import { useShallowEqualSelector } from '../../hooks/use_selector';
 import { inputsSelectors } from '../../store';
 import { inputsActions } from '../../store/actions';
 
@@ -29,8 +30,10 @@ export const resetScroll = () => {
 
 export const useFullScreen = () => {
   const dispatch = useDispatch();
-  const globalFullScreen = useSelector(inputsSelectors.globalFullScreenSelector) ?? false;
-  const timelineFullScreen = useSelector(inputsSelectors.timelineFullScreenSelector) ?? false;
+  const globalFullScreen =
+    useShallowEqualSelector(inputsSelectors.globalFullScreenSelector) ?? false;
+  const timelineFullScreen =
+    useShallowEqualSelector(inputsSelectors.timelineFullScreenSelector) ?? false;
 
   const setGlobalFullScreen = useCallback(
     (fullScreen: boolean) => {

x-pack/plugins/security_solution/public/common/containers/use_global_time/index.tsx

@@ -5,15 +5,16 @@
  */
 
 import { useCallback, useState, useEffect, useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
+import { useShallowEqualSelector } from '../../hooks/use_selector';
 import { inputsSelectors } from '../../store';
 import { inputsActions } from '../../store/actions';
 import { SetQuery, DeleteQuery } from './types';
 
 export const useGlobalTime = (clearAllQuery: boolean = true) => {
   const dispatch = useDispatch();
-  const { from, to } = useSelector(inputsSelectors.globalTimeRangeSelector);
+  const { from, to } = useShallowEqualSelector(inputsSelectors.globalTimeRangeSelector);
   const [isInitializing, setIsInitializing] = useState(true);
 
   const setQuery = useCallback(

x-pack/plugins/security_solution/public/common/hooks/use_selector.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { shallowEqual, useSelector } from 'react-redux';
+import deepEqual from 'fast-deep-equal';
+import { State } from '../store';
+
+export type TypedUseSelectorHook = <TSelected, TState = State>(
+  selector: (state: TState) => TSelected,
+  equalityFn?: (left: TSelected, right: TSelected) => boolean
+) => TSelected;
+
+export const useShallowEqualSelector: TypedUseSelectorHook = (selector) =>
+  useSelector(selector, shallowEqual);
+
+export const useDeepEqualSelector: TypedUseSelectorHook = (selector) =>
+  useSelector(selector, deepEqual);

x-pack/plugins/security_solution/public/hosts/containers/authentications/index.tsx

@@ -6,7 +6,6 @@
 
 import { noop } from 'lodash/fp';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
 import deepEqual from 'fast-deep-equal';
 
 import {
@@ -26,7 +25,8 @@ import {
 } from '../../../../common/search_strategy';
 import { ESTermQuery } from '../../../../common/typed_json';
 
-import { inputsModel, State } from '../../../common/store';
+import { useShallowEqualSelector } from '../../../common/hooks/use_selector';
+import { inputsModel } from '../../../common/store';
 import { createFilter } from '../../../common/containers/helpers';
 import { generateTablePaginationOptions } from '../../../common/components/paginated_table/helpers';
 import { useKibana } from '../../../common/lib/kibana';
@@ -71,9 +71,8 @@ export const useAuthentications = ({
   skip,
 }: UseAuthentications): [boolean, AuthenticationArgs] => {
   const getAuthenticationsSelector = hostsSelectors.authenticationsSelector();
-  const { activePage, limit } = useSelector(
-    (state: State) => getAuthenticationsSelector(state, type),
-    shallowEqual
+  const { activePage, limit } = useShallowEqualSelector((state) =>
+    getAuthenticationsSelector(state, type)
   );
   const { data, notifications } = useKibana().services;
   const refetch = useRef<inputsModel.Refetch>(noop);

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

@@ -7,11 +7,11 @@
 import deepEqual from 'fast-deep-equal';
 import { noop } from 'lodash/fp';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
 
 import { inputsModel, State } from '../../../common/store';
 import { createFilter } from '../../../common/containers/helpers';
 import { useKibana } from '../../../common/lib/kibana';
+import { useShallowEqualSelector } from '../../../common/hooks/use_selector';
 import { hostsModel, hostsSelectors } from '../../store';
 import { generateTablePaginationOptions } from '../../../common/components/paginated_table/helpers';
 import {
@@ -69,7 +69,7 @@ export const useAllHost = ({
   type,
 }: UseAllHost): [boolean, HostsArgs] => {
   const getHostsSelector = hostsSelectors.hostsSelector();
-  const { activePage, direction, limit, sortField } = useSelector((state: State) =>
+  const { activePage, direction, limit, sortField } = useShallowEqualSelector((state: State) =>
     getHostsSelector(state, type)
   );
   const { data, notifications } = useKibana().services;

x-pack/plugins/security_solution/public/network/components/network_dns_table/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
-import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import deepEqual from 'fast-deep-equal';
 
 import { networkActions, networkModel, networkSelectors } from '../../store';
@@ -16,6 +16,7 @@ import {
   NetworkDnsFields,
 } from '../../../../common/search_strategy';
 import { Criteria, ItemsPerRow, PaginatedTable } from '../../../common/components/paginated_table';
+import { useShallowEqualSelector } from '../../../common/hooks/use_selector';
 
 import { getNetworkDnsColumns } from './columns';
 import { IsPtrIncluded } from './is_ptr_included';
@@ -59,10 +60,7 @@ const NetworkDnsTableComponent: React.FC<NetworkDnsTableProps> = ({
 }) => {
   const dispatch = useDispatch();
   const getNetworkDnsSelector = networkSelectors.dnsSelector();
-  const { activePage, isPtrIncluded, limit, sort } = useSelector(
-    getNetworkDnsSelector,
-    shallowEqual
-  );
+  const { activePage, isPtrIncluded, limit, sort } = useShallowEqualSelector(getNetworkDnsSelector);
   const updateLimitPagination = useCallback(
     (newLimit) =>
       dispatch(

x-pack/plugins/security_solution/public/network/components/network_http_table/index.tsx

@@ -5,11 +5,11 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
-import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
 import { networkActions, networkModel, networkSelectors } from '../../store';
 import { NetworkHttpEdges, NetworkHttpFields } from '../../../../common/search_strategy';
-import { State } from '../../../common/store';
+import { useShallowEqualSelector } from '../../../common/hooks/use_selector';
 import { Criteria, ItemsPerRow, PaginatedTable } from '../../../common/components/paginated_table';
 
 import { getNetworkHttpColumns } from './columns';
@@ -51,9 +51,8 @@ const NetworkHttpTableComponent: React.FC<NetworkHttpTableProps> = ({
 }) => {
   const dispatch = useDispatch();
   const getNetworkHttpSelector = networkSelectors.httpSelector();
-  const { activePage, limit, sort } = useSelector(
-    (state: State) => getNetworkHttpSelector(state, type),
-    shallowEqual
+  const { activePage, limit, sort } = useShallowEqualSelector((state) =>
+    getNetworkHttpSelector(state, type)
   );
   const tableType =
     type === networkModel.NetworkType.page