How to use useMediaQuery with the same set of breakpoints efficiently across many components

[kdevan]

I'm just digging into this now so I'll update with my findings either way. But just thought I'd ask in case someone with some more insight can help get me there quicker :)

The sites I build all use the same design system and therefore the same breakpoints. Many components get altered based on these breakpoints. My starting point will be to create my own hook that then uses this hook (useMediaQuery) to define each of the breakpoints. My hook would then return an object that contains the result of each useMediaQuery call, something like:

{
    'sm': false,
    'md': false,
    'lg': true,
}

If I am calling my hook all around a bunch of components, will each instance be creating its own subscriptions and listeners? If so, is the performance of this negligible enough that it wouldn't really matter? If the performance hit does grow with each component, I'm thinking I can do something like tie this into a global store (like redux), so that I'm only creating the subscriptions and listeners once, and then components just select the value from the global store. But that's a bit more complicated than I'm hoping for and might have some implications of its own.

Anyways, any advice on what might be a good strategy here is much appreciated.

[kdevan]

Using the first method is performing well for me so far. I'll update if I run into anything as I add to more components. The component looks something like this:

import { useMediaQuery } from '@react-hookz/web/esm/useMediaQuery';

export function useScreenBreakpoint() {
  const xxs = useMediaQuery('only screen and (max-width : 320px)');
  const xs = useMediaQuery('only screen and (min-width : 321px) and (max-width : 375px)');
  const sm = useMediaQuery('only screen and (min-width : 376px) and (max-width : 640px)');
  const md = useMediaQuery('only screen and (min-width : 641px) and (max-width : 768px)');
  const lg = useMediaQuery('only screen and (min-width : 769px) and (max-width : 1024px)');
  const xl = useMediaQuery('only screen and (min-width : 1025px) and (max-width : 1280px)');
  const xxl = useMediaQuery('only screen and (min-width : 1281px) and (max-width : 1440px)');
  const xxxl = useMediaQuery('only screen and (min-width : 1441px) and (max-width : 1920px)');
  const xxxxl = useMediaQuery('only screen and (min-width : 1921px) and (max-width : 2048px)');
  const xxxxxl = useMediaQuery('only screen and (min-width : 2049px)');

  switch (true) {
    case xxs:
      return '2xs';
    case xs:
      return 'xs';
    case sm:
      return 'sm';
    case md:
      return 'md';
    case lg:
      return 'lg';
    case xl:
      return 'xl';
    case xxl:
      return '2xl';
    case xxxl:
      return '3xl';
    case xxxxl:
      return '4xl';
    case xxxxxl:
      return '5xl';
    default:
      return '5xl';
  }
};

[xobotyi]

The hook is optimized to use large amount of subscribers.
Internally only one subscriber is assigned to each unique media query string, all hooks are just register their state setters in update queue (this approach proven to be more performant than individual subscriber per hook).

[xobotyi]

Though I would suggest approach with single state passed down via context

[kdevan]

Ah good to know! Thank you very much for the feedback.