The suggestion

Opening up the discussion on useMediaQuery. A versatile tool for detecting media features such as device orientation.

How we currently use it is a bit abstracted. Within the useIsScreen directory. We have defined different hooks that checks different breakpoints.

For example. const isSmallScreen = useIsSmallScreen(), const isLargeScreen = useIsLargeScreen()

Which makes sense and is easy to use. Though the hooks mentioned above, calls a hook inside it. Which then calls useMediaQuery.

Something like: useIsSmallScreen -> useIsScreen(breakpoint) -> useMediaQuery(breakpoint)

export const useIsExtraSmallScreen = (): boolean => {
  return useIsScreen('sm');
};

export const useIsScreen = (breakpoint: Breakpoint): boolean => {
  const theme = useAppTheme();
  return useMediaQuery(theme.breakpoints.down(breakpoint));
};

Its a nice layout but it's also a bit of a few hoops to jump through. A suggestion is to just call useMediaQuery directly rather than going through a few layers to call it.

A component will just have to define theme and then just call it:
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'))

This stemmed from a discussion/comment in this PR: #7042 (comment)

Example use case

Why should we invest time in this?

This saves time initially understanding whats the relationships of the hooks within useIsScreen directory.

This removes some abstractions and can just directly call the function.

This can help improve the overall understanding of how breakpoints functions on a browser.

This could serve as a starting point for standardizing our naming conventions for different breakpoints and minimizing the amount of hooks in that directory.

• e.g. in our code base we have const isGaps = useIsGapsStoreOnly() and const isSmallScreen = useIsSmallScreen(). Which both calls useIsScreen('sm').

Are there any risks associated with this change?

A component looking funny because we gave it the wrong breakpoint

How much effort is required?

This change becomes repetitive after a while, it will take roughly half a day

Agreed Solution

Directly call useMediaQuery in a component that needs it.

const theme = useAppTheme;
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'))

Another solution is to keep the useIsScreen hook, to avoid defining theme in components, 1 line code less

const isSmallScreen = useIsScreen('sm')