[APM] Add memoization to hooks consumed on service inventory page (#1…

…73973)

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: #127036

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]);
 }

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>

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]);
 }