API window.matchMedia

Окей, когда что-то нужно перестроить в интерфейсе при изменении разрешения экрана, используется media query в CSS.

Но бывают случаи, когда просто что-то изменить в стилях недостаточно. Например, нужно перемонтировать компонент, запрос отправить на сервер за дополнительными данными или ещё что-то в этом духе.

Первая мысль, как поступить в этой ситуации — подписаться на resize окна и смотреть в хендлере, нужная сейчас ширина окна или нет.

function handleResize() {
  if (window.innerWidth >= width) {
    // setIsGreaterThanOrEqual whatever
  }
}

window.addEventListener("resize", handleResize);

Проблема такого подхода в том, что резайз будет срабатывать на каждом изменившемся пикселе размера окна, и триггерить перерисовку. Что не есть хорошо если нужно отследить только факт условного «сейчас мобилка или нет?».

Триггерить только срабатывание определённого условия ширины можно… теми же mediaQuery, только в JS. Для этого существет API window.matchMedia https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia, который принимает строку с медиавыражением и возвращает объект MediaQueryList, содержащий информацию о медиавыражении, применённом к документу.

const matchQueryList = window.matchMedia("(max-width: 600px)")

Для разовой проверки соответствия используется свойство matches:

matchQueryList.matches // true or false

А для постоянного отслеживания соответствия, есть подписка на событие change:

function handleChange(e) {
  // e.matches whatever
}

matchQueryList.addEventListener("change", handleChange);

Для Реакта всё это заворачивается в хук и получается удобное отслеживание медиавыражений в JS:

function App() {
  const isMobile = useMatchMedia("(max-width: 768px)");

  return <h1>Browsing with {isMobile ? "mobile" : "desktop"}</h1>;
}

Код тут https://codesandbox.io/p/devbox/frosty-mcclintock-93ghzg