review: row_renderer_switch

elastic · Jul 2, 2024 · 1c07c65 · 1c07c65
1 parent 78662ba
commit 1c07c65
Showing 1 changed file with 14 additions and 18 deletions.
diff --git a/x-pack/plugins/security_solution/public/timelines/components/row_renderer_switch/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/row_renderer_switch/index.tsx
@@ -7,7 +7,7 @@
 
 import type { EuiSwitchEvent } from '@elastic/eui';
 import { EuiToolTip, EuiSwitch, EuiFormRow, useGeneratedHtmlId } from '@elastic/eui';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { RowRendererId } from '../../../../common/api/timeline';
@@ -39,13 +39,11 @@ export const RowRendererSwitch = React.memo(function RowRendererSwitch(
     selectExcludedRowRendererIds(state, timelineId)
   );
 
-  const areAllRowRenderersExcluded = useMemo(
-    () => Object.values(RowRendererId).every((id) => excludedRowRendererIds.includes(id)),
+  const isAnyRowRendererEnabled = useMemo(
+    () => Object.values(RowRendererId).some((id) => !excludedRowRendererIds.includes(id)),
     [excludedRowRendererIds]
   );
 
-  const [checked, setChecked] = useState(!areAllRowRenderersExcluded);
-
   const handleDisableAll = useCallback(() => {
     dispatch(
       setExcludedRowRendererIds({
@@ -59,31 +57,29 @@ export const RowRendererSwitch = React.memo(function RowRendererSwitch(
     dispatch(setExcludedRowRendererIds({ id: timelineId, excludedRowRendererIds: [] }));
   }, [dispatch, timelineId]);
 
-  const onChange = (e: EuiSwitchEvent) => {
-    setChecked(e.target.checked);
-    if (e.target.checked) {
-      handleEnableAll();
-    } else {
-      handleDisableAll();
-    }
-  };
+  const onChange = useCallback(
+    (e: EuiSwitchEvent) => {
+      if (e.target.checked) {
+        handleEnableAll();
+      } else {
+        handleDisableAll();
+      }
+    },
+    [handleDisableAll, handleEnableAll]
+  );
 
   const rowRendererLabel = useMemo(
     () => <span id={toggleTextSwitchId}>{i18n.EVENT_RENDERERS_SWITCH}</span>,
     [toggleTextSwitchId]
   );
 
-  useEffect(() => {
-    setChecked(!areAllRowRenderersExcluded);
-  }, [areAllRowRenderersExcluded]);
-
   return (
     <EuiToolTip position="top" content={i18n.EVENT_RENDERERS_SWITCH_WARNING}>
       <CustomFormRow display="columnCompressedSwitch" label={rowRendererLabel}>
         <EuiSwitch
           data-test-subj="row-renderer-switch"
           label=""
-          checked={checked}
+          checked={isAnyRowRendererEnabled}
           onChange={onChange}
           compressed
         />