Fix useBreakpoints

sorenlouv · Jan 12, 2024 · 3ffece9 · 3ffece9
1 parent 526901f
commit 3ffece9
Showing 1 changed file with 11 additions and 11 deletions.
diff --git a/x-pack/plugins/apm/public/hooks/use_breakpoints.ts b/x-pack/plugins/apm/public/hooks/use_breakpoints.ts
@@ -14,16 +14,16 @@ 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');
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useMemo(() => screenSizes, [useIsWithinMaxBreakpoint]);
+  return useMemo(() => {
+    return { isXSmall, isSmall, isMedium, isLarge, isXl, isXXL, isXXXL };
+  }, [isXSmall, isSmall, isMedium, isLarge, isXl, isXXL, isXXXL]);
 }
+