From ad5c8cefee94447078e8b30139c0e1a3be4eb03d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= <soren.louv@elastic.co>
Date: Fri, 12 Jan 2024 17:57:03 +0100
Subject: [PATCH] [APM] Add memoization to hooks consumed on service inventory
 page (#173973)

This perf optimisation is needed for improvements made on the Service
Inventory page. The memoisations should improve perf of any component
currently consuming them.

Related: https://github.com/elastic/kibana/issues/127036
---
 .../src/use_params.ts                         | 12 +++++------
 .../service_inventory/service_list/index.tsx  | 20 +++++++++++-------
 .../apm/public/hooks/use_breakpoints.ts       | 21 ++++++++++---------
 3 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/packages/kbn-typed-react-router-config/src/use_params.ts b/packages/kbn-typed-react-router-config/src/use_params.ts
index 0468eb9566236..2ecb417099df0 100644
--- a/packages/kbn-typed-react-router-config/src/use_params.ts
+++ b/packages/kbn-typed-react-router-config/src/use_params.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { Location } from 'history';
+import { useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useRouter } from './use_router';
 
@@ -23,9 +23,9 @@ export function useParams(...args: any[]) {
     args.pop();
   }
 
-  const paths = args as string[];
-
-  const getParamsArgs = [...paths, location, optional] as [never, Location<any>, boolean];
-
-  return router.getParams(...getParamsArgs);
+  return useMemo(() => {
+    // @ts-expect-error
+    return router.getParams(...args, location, optional);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router, ...args, location, optional]);
 }
diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx
index b3e36fc8bebb9..4d3186c784447 100644
--- a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx
@@ -17,7 +17,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { ALERT_STATUS_ACTIVE } from '@kbn/rule-data-utils';
 import { TypeOf } from '@kbn/typed-react-router-config';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { ServiceHealthStatus } from '../../../../../common/service_health_status';
 import {
   ServiceInventoryFieldName,
@@ -358,6 +358,16 @@ export function ServiceList({
     ]
   );
 
+  const handleSort = useCallback(
+    (itemsToSort, sortField, sortDirection) =>
+      sortFn(
+        itemsToSort,
+        sortField as ServiceInventoryFieldName,
+        sortDirection
+      ),
+    [sortFn]
+  );
+
   return (
     <EuiFlexGroup gutterSize="xs" direction="column" responsive={false}>
       <EuiFlexItem>
@@ -405,13 +415,7 @@ export function ServiceList({
           initialSortField={initialSortField}
           initialSortDirection={initialSortDirection}
           initialPageSize={initialPageSize}
-          sortFn={(itemsToSort, sortField, sortDirection) =>
-            sortFn(
-              itemsToSort,
-              sortField as ServiceInventoryFieldName,
-              sortDirection
-            )
-          }
+          sortFn={handleSort}
         />
       </EuiFlexItem>
     </EuiFlexGroup>
diff --git a/x-pack/plugins/apm/public/hooks/use_breakpoints.ts b/x-pack/plugins/apm/public/hooks/use_breakpoints.ts
index 9ec8b20bb472d..5e991cc477762 100644
--- a/x-pack/plugins/apm/public/hooks/use_breakpoints.ts
+++ b/x-pack/plugins/apm/public/hooks/use_breakpoints.ts
@@ -9,19 +9,20 @@ import {
   useIsWithinMaxBreakpoint,
   useIsWithinMinBreakpoint,
 } from '@elastic/eui';
+import { useMemo } from 'react';
 
 export type Breakpoints = Record<string, boolean>;
 
 export function useBreakpoints() {
-  const screenSizes = {
-    isXSmall: useIsWithinMaxBreakpoint('xs'),
-    isSmall: useIsWithinMaxBreakpoint('s'),
-    isMedium: useIsWithinMaxBreakpoint('m'),
-    isLarge: useIsWithinMaxBreakpoint('l'),
-    isXl: useIsWithinMaxBreakpoint('xl'),
-    isXXL: useIsWithinMaxBreakpoint('xxl'),
-    isXXXL: useIsWithinMinBreakpoint('xxxl'),
-  };
+  const isXSmall = useIsWithinMaxBreakpoint('xs');
+  const isSmall = useIsWithinMaxBreakpoint('s');
+  const isMedium = useIsWithinMaxBreakpoint('m');
+  const isLarge = useIsWithinMaxBreakpoint('l');
+  const isXl = useIsWithinMaxBreakpoint('xl');
+  const isXXL = useIsWithinMaxBreakpoint('xxl');
+  const isXXXL = useIsWithinMinBreakpoint('xxxl');
 
-  return screenSizes;
+  return useMemo(() => {
+    return { isXSmall, isSmall, isMedium, isLarge, isXl, isXXL, isXXXL };
+  }, [isXSmall, isSmall, isMedium, isLarge, isXl, isXXL, isXXXL]);
 }