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 0468eb956623..2ecb417099df 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, 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 b3e36fc8bebb..4d3186c78444 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 ( @@ -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} /> diff --git a/x-pack/plugins/apm/public/hooks/use_breakpoints.ts b/x-pack/plugins/apm/public/hooks/use_breakpoints.ts index 9ec8b20bb472..5e991cc47776 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; 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]); }