Fixing imports; wrapping code in useMemo to optimize

elastic · Oct 31, 2019 · f725d8a · f725d8a
1 parent 82f3f16
commit f725d8a
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 39 deletions.
diff --git a/x-pack/legacy/plugins/infra/public/pages/metrics/components/section.tsx b/x-pack/legacy/plugins/infra/public/pages/metrics/components/section.tsx
@@ -4,7 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FunctionComponent, useCallback } from 'react';
+import React, {
+  useContext,
+  Children,
+  isValidElement,
+  cloneElement,
+  FunctionComponent,
+  useCallback,
+  useMemo,
+} from 'react';
 import { EuiTitle } from '@elastic/eui';
 import { SideNavContext, SubNavItem } from '../lib/side_nav_context';
 import { LayoutProps } from '../types';
@@ -23,33 +31,37 @@ export const Section: FunctionComponent<SectionProps> = ({
   isLiveStreaming,
   stopLiveStreaming,
 }) => {
-  const { addNavItem } = React.useContext(SideNavContext);
+  const { addNavItem } = useContext(SideNavContext);
   const subNavItems: SubNavItem[] = [];
 
-  const childrenWithProps = React.Children.map(children, child => {
-    if (React.isValidElement(child)) {
-      const metric = (metrics && metrics.find(m => m.id === child.props.id)) || null;
-      if (metric) {
-        subNavItems.push({
-          id: child.props.id,
-          name: child.props.label,
-          onClick: useCallback(() => {
-            const el = document.getElementById(child.props.id);
-            if (el) {
-              el.scrollIntoView();
-            }
-          }, []),
-        });
-      }
-      return React.cloneElement(child, {
-        metrics,
-        onChangeRangeTime,
-        isLiveStreaming,
-        stopLiveStreaming,
-      });
-    }
-    return null;
-  });
+  const childrenWithProps = useMemo(
+    () =>
+      Children.map(children, child => {
+        if (isValidElement(child)) {
+          const metric = (metrics && metrics.find(m => m.id === child.props.id)) || null;
+          if (metric) {
+            subNavItems.push({
+              id: child.props.id,
+              name: child.props.label,
+              onClick: () => {
+                const el = document.getElementById(child.props.id);
+                if (el) {
+                  el.scrollIntoView();
+                }
+              },
+            });
+          }
+          return cloneElement(child, {
+            metrics,
+            onChangeRangeTime,
+            isLiveStreaming,
+            stopLiveStreaming,
+          });
+        }
+        return null;
+      }),
+    [children, metrics, onChangeRangeTime, isLiveStreaming, stopLiveStreaming]
+  );
 
   if (metrics && subNavItems.length) {
     addNavItem({ id: navLabel, name: navLabel, items: subNavItems });

diff --git a/x-pack/legacy/plugins/infra/public/pages/metrics/components/sub_section.tsx b/x-pack/legacy/plugins/infra/public/pages/metrics/components/sub_section.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FunctionComponent } from 'react';
+import React, { isValidElement, cloneElement, FunctionComponent, Children, useMemo } from 'react';
 import { EuiTitle } from '@elastic/eui';
 import { InventoryMetric } from '../../../../common/inventory_models/types';
 import { LayoutProps } from '../types';
@@ -30,18 +30,22 @@ export const SubSection: FunctionComponent<SubSectionProps> = ({
   if (!metric) {
     return null;
   }
-  const childrenWithProps = React.Children.map(children, child => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, {
-        metric,
-        id,
-        onChangeRangeTime,
-        isLiveStreaming,
-        stopLiveStreaming,
-      });
-    }
-    return null;
-  });
+  const childrenWithProps = useMemo(
+    () =>
+      Children.map(children, child => {
+        if (isValidElement(child)) {
+          return cloneElement(child, {
+            metric,
+            id,
+            onChangeRangeTime,
+            isLiveStreaming,
+            stopLiveStreaming,
+          });
+        }
+        return null;
+      }),
+    [children, metric, id, onChangeRangeTime, isLiveStreaming, stopLiveStreaming]
+  );
   return (
     <div style={{ margin: '10px 0 16px 0' }} id={id}>
       {label ? (