Remove effect from useMonitorsSortedByStatus

elastic · Nov 29, 2022 · a7b35cf · a7b35cf
1 parent bc23cd6
commit a7b35cf
Showing 1 changed file with 33 additions and 36 deletions.
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_monitors_sorted_by_status.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_monitors_sorted_by_status.tsx
@@ -5,8 +5,7 @@
  * 2.0.
  */
 
-import { useEffect, useMemo, useState, useRef } from 'react';
-import { isEqual } from 'lodash';
+import { useMemo, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { MonitorOverviewItem } from '../../../../common/runtime_types';
 import { selectOverviewState } from '../state/overview';
@@ -20,17 +19,19 @@ export function useMonitorsSortedByStatus() {
     data: { monitors },
     status,
   } = useSelector(selectOverviewState);
-  const [monitorsSortedByStatus, setMonitorsSortedByStatus] = useState<
-    Record<string, MonitorOverviewItem[]>
-  >({ up: [], down: [], disabled: [] });
+
   const downMonitors = useRef<Record<string, string[]> | null>(null);
-  const currentMonitors = useRef<MonitorOverviewItem[] | null>(monitors);
   const locationNames = useLocationNames();
 
-  useEffect(() => {
+  const monitorsSortedByStatus = useMemo(() => {
     if (!status) {
-      return;
+      return {
+        down: [],
+        up: [],
+        disabled: [],
+      };
     }
+
     const { downConfigs } = status;
     const downMonitorMap: Record<string, string[]> = {};
     downConfigs.forEach(({ location, configId }) => {
@@ -41,34 +42,30 @@ export function useMonitorsSortedByStatus() {
       }
     });
 
-    if (
-      !isEqual(downMonitorMap, downMonitors.current) ||
-      !isEqual(monitors, currentMonitors.current)
-    ) {
-      const orderedDownMonitors: MonitorOverviewItem[] = [];
-      const orderedUpMonitors: MonitorOverviewItem[] = [];
-      const orderedDisabledMonitors: MonitorOverviewItem[] = [];
-      monitors.forEach((monitor) => {
-        const monitorLocation = locationNames[monitor.location.id];
-        if (!monitor.isEnabled) {
-          orderedDisabledMonitors.push(monitor);
-        } else if (
-          Object.keys(downMonitorMap).includes(monitor.id) &&
-          downMonitorMap[monitor.id].includes(monitorLocation)
-        ) {
-          orderedDownMonitors.push(monitor);
-        } else {
-          orderedUpMonitors.push(monitor);
-        }
-      });
-      downMonitors.current = downMonitorMap;
-      currentMonitors.current = monitors;
-      setMonitorsSortedByStatus({
-        down: orderedDownMonitors,
-        up: orderedUpMonitors,
-        disabled: orderedDisabledMonitors,
-      });
-    }
+    const orderedDownMonitors: MonitorOverviewItem[] = [];
+    const orderedUpMonitors: MonitorOverviewItem[] = [];
+    const orderedDisabledMonitors: MonitorOverviewItem[] = [];
+
+    monitors.forEach((monitor) => {
+      const monitorLocation = locationNames[monitor.location.id];
+      if (!monitor.isEnabled) {
+        orderedDisabledMonitors.push(monitor);
+      } else if (
+        monitor.id in downMonitorMap &&
+        downMonitorMap[monitor.id].includes(monitorLocation)
+      ) {
+        orderedDownMonitors.push(monitor);
+      } else {
+        orderedUpMonitors.push(monitor);
+      }
+    });
+    downMonitors.current = downMonitorMap;
+
+    return {
+      down: orderedDownMonitors,
+      up: orderedUpMonitors,
+      disabled: orderedDisabledMonitors,
+    };
   }, [monitors, locationNames, downMonitors, status]);
 
   return useMemo(() => {