adding useMemo (#63504)

elastic · Apr 14, 2020 · 0abbb1d · 0abbb1d
1 parent 5aa93be
commit 0abbb1d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 27 deletions.
diff --git a/...k/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/linux.tsx b/...k/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/linux.tsx
@@ -8,18 +8,19 @@ import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiTitle, EuiText, EuiSpacer } from '@elastic/eui';
+import { ImmutableArray } from '../../../../../../../common/types';
+import { getIn, setIn } from '../../../../models/policy_details_config';
 import { EventsCheckbox } from './checkbox';
 import { OS, UIPolicyConfig } from '../../../../types';
 import { usePolicyDetailsSelector } from '../../policy_hooks';
 import { selectedLinuxEvents, totalLinuxEvents } from '../../../../store/policy_details/selectors';
 import { ConfigForm } from '../config_form';
-import { getIn, setIn } from '../../../../models/policy_details_config';
 
 export const LinuxEvents = React.memo(() => {
   const selected = usePolicyDetailsSelector(selectedLinuxEvents);
   const total = usePolicyDetailsSelector(totalLinuxEvents);
 
-  const checkboxes: Array<{
+  const checkboxes: ImmutableArray<{
     name: string;
     os: 'linux';
     protectionField: keyof UIPolicyConfig['linux']['events'];
@@ -50,7 +51,7 @@ export const LinuxEvents = React.memo(() => {
     []
   );
 
-  const renderCheckboxes = () => {
+  const renderCheckboxes = useMemo(() => {
     return (
       <>
         <EuiTitle size="xxs">
@@ -76,9 +77,9 @@ export const LinuxEvents = React.memo(() => {
         })}
       </>
     );
-  };
+  }, [checkboxes]);
 
-  const collectionsEnabled = () => {
+  const collectionsEnabled = useMemo(() => {
     return (
       <EuiText size="s" color="subdued">
         <FormattedMessage
@@ -88,19 +89,20 @@ export const LinuxEvents = React.memo(() => {
         />
       </EuiText>
     );
-  };
+  }, [selected, total]);
 
   return (
     <ConfigForm
       type={i18n.translate('xpack.endpoint.policy.details.eventCollection', {
         defaultMessage: 'Event Collection',
       })}
-      supportedOss={[
-        i18n.translate('xpack.endpoint.policy.details.linux', { defaultMessage: 'Linux' }),
-      ]}
-      id="linuxEventingForm"
-      rightCorner={collectionsEnabled()}
-      children={renderCheckboxes()}
+      supportedOss={useMemo(
+        () => [i18n.translate('xpack.endpoint.policy.details.linux', { defaultMessage: 'Linux' })],
+        []
+      )}
+      id="linuxEventsForm"
+      rightCorner={collectionsEnabled}
+      children={renderCheckboxes}
     />
   );
 });
diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/mac.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/mac.tsx
@@ -8,18 +8,19 @@ import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiTitle, EuiText, EuiSpacer } from '@elastic/eui';
+import { ImmutableArray } from '../../../../../../../common/types';
+import { getIn, setIn } from '../../../../models/policy_details_config';
 import { EventsCheckbox } from './checkbox';
 import { OS, UIPolicyConfig } from '../../../../types';
 import { usePolicyDetailsSelector } from '../../policy_hooks';
 import { selectedMacEvents, totalMacEvents } from '../../../../store/policy_details/selectors';
 import { ConfigForm } from '../config_form';
-import { getIn, setIn } from '../../../../models/policy_details_config';
 
 export const MacEvents = React.memo(() => {
   const selected = usePolicyDetailsSelector(selectedMacEvents);
   const total = usePolicyDetailsSelector(totalMacEvents);
 
-  const checkboxes: Array<{
+  const checkboxes: ImmutableArray<{
     name: string;
     os: 'mac';
     protectionField: keyof UIPolicyConfig['mac']['events'];
@@ -50,7 +51,7 @@ export const MacEvents = React.memo(() => {
     []
   );
 
-  const renderCheckboxes = () => {
+  const renderCheckboxes = useMemo(() => {
     return (
       <>
         <EuiTitle size="xxs">
@@ -76,9 +77,9 @@ export const MacEvents = React.memo(() => {
         })}
       </>
     );
-  };
+  }, [checkboxes]);
 
-  const collectionsEnabled = () => {
+  const collectionsEnabled = useMemo(() => {
     return (
       <EuiText size="s" color="subdued">
         <FormattedMessage
@@ -88,19 +89,20 @@ export const MacEvents = React.memo(() => {
         />
       </EuiText>
     );
-  };
+  }, [selected, total]);
 
   return (
     <ConfigForm
       type={i18n.translate('xpack.endpoint.policy.details.eventCollection', {
         defaultMessage: 'Event Collection',
       })}
-      supportedOss={[
-        i18n.translate('xpack.endpoint.policy.details.mac', { defaultMessage: 'Mac' }),
-      ]}
-      id="macEventingForm"
-      rightCorner={collectionsEnabled()}
-      children={renderCheckboxes()}
+      supportedOss={useMemo(
+        () => [i18n.translate('xpack.endpoint.policy.details.mac', { defaultMessage: 'Mac' })],
+        []
+      )}
+      id="macEventsForm"
+      rightCorner={collectionsEnabled}
+      children={renderCheckboxes}
     />
   );
 });
diff --git a/...plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/windows.tsx b/...plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/events/windows.tsx
@@ -8,6 +8,8 @@ import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiTitle, EuiText, EuiSpacer } from '@elastic/eui';
+import { ImmutableArray } from '../../../../../../../common/types';
+import { setIn, getIn } from '../../../../models/policy_details_config';
 import { EventsCheckbox } from './checkbox';
 import { OS, UIPolicyConfig } from '../../../../types';
 import { usePolicyDetailsSelector } from '../../policy_hooks';
@@ -16,13 +18,12 @@ import {
   totalWindowsEvents,
 } from '../../../../store/policy_details/selectors';
 import { ConfigForm } from '../config_form';
-import { setIn, getIn } from '../../../../models/policy_details_config';
 
 export const WindowsEvents = React.memo(() => {
   const selected = usePolicyDetailsSelector(selectedWindowsEvents);
   const total = usePolicyDetailsSelector(totalWindowsEvents);
 
-  const checkboxes: Array<{
+  const checkboxes: ImmutableArray<{
     name: string;
     os: 'windows';
     protectionField: keyof UIPolicyConfig['windows']['events'];
@@ -132,7 +133,7 @@ export const WindowsEvents = React.memo(() => {
         ],
         []
       )}
-      id="windowsEventingForm"
+      id="windowsEventsForm"
       rightCorner={collectionsEnabled}
       children={renderCheckboxes}
     />