Подписка на API браузера

Браузерные медиазапросы — отличный пример внешнего хранилища. Вы можете подписаться на запрос matchMedia для темной темы или контрольной точки и выполнять повторный рендеринг при каждом изменении состояния соответствия.

Функция подписки добавляет слушателя изменений к MediaQueryList, а getSnapshot возвращает текущее логическое значение, показывающее соответствие, предоставляя реактивный доступ к условиям адаптивного интерфейса.

Если объединить эту логику в хук useMediaQuery, компоненты смогут проверять соответствие запроса одним вызовом. Хук создает стабильные функцию подписки и getSnapshot для заданной строки запроса.

В результате получается чистый переиспользуемый примитив для адаптивного поведения, сохраняющий корректность при конкурентном рендеринге благодаря useSyncExternalStore.

Браузер предоставляет события подключения и отключения от сети, а также navigator.onLine. Подписка на эти события и чтение свойства дают React актуальный статус подключения.

getSnapshot возвращает navigator.onLine, а функция подписки подключает слушателей событий перехода в онлайн- и офлайн-режим, поэтому компонент обновляется при изменении подключения.

Если объединить эту логику в хук useOnlineStatus, любой компонент сможет показывать баннеры об отсутствии подключения или отключать действия при сбое сети. Именно этот пример приведен в официальной документации React для демонстрации хука.

Это небольшой, но наглядный случай, когда внешний сигнал браузера естественно преобразуется в часть реактивного состояния.

Вы можете отслеживать изменения навигации, слушая события изменения истории браузера и считывая window.location в getSnapshot. На этом основаны простые пользовательские маршрутизаторы, построенные на API истории.

Поскольку pushState не вызывает событие изменения истории, пользовательские маршрутизаторы часто отправляют собственное событие, чтобы снимок обновлялся и при программной навигации.

Событие хранилища срабатывает в других вкладках при изменении localStorage, поэтому на него можно подписаться как на внешнее хранилище. getSnapshot считывает текущее значение, а функция подписки слушает события хранилища.

Это обеспечивает синхронизацию между вкладками: изменение значения в одной вкладке реактивно обновляет компоненты в другой.

Событие ориентации устройства сообщает о его физическом наклоне. Подписка на него и чтение последних углов в getSnapshot превращают данные о движении в реактивное состояние.

Это полезно для эффектов параллакса и интерактивных визуализаций, реагирующих на положение телефона в руке.

IntersectionObserver сообщает, когда элемент входит в область просмотра или покидает ее. Вы можете обернуть его так, чтобы функция подписки создавала наблюдатель, а getSnapshot возвращал последнее значение isIntersecting.

Так Вы получаете реактивный флаг isVisible для отложенной загрузки изображений, запуска анимаций или реализации маркеров бесконечной прокрутки.

ResizeObserver сообщает об изменениях размера элемента. Его обертка позволяет функции подписки наблюдать за элементом, а getSnapshot — возвращать его текущие размеры, поэтому компоненты точно реагируют на изменения макета.

Это эффективнее и точнее, чем отслеживать изменение размера окна, если Вас интересует конкретный элемент, а не вся область просмотра.

Вы можете объединить событие изменения размера с хуком и создать useWindowSize, возвращающий текущие ширину и высоту. Функция подписки подключает слушателя изменения размера, а getSnapshot считывает размеры окна.

Помните о необходимости возвращать стабильный снимок: кэшируйте объект размеров, чтобы неизменившиеся размеры не вызывали повторный рендеринг и композиция оставалась эффективной.

Разберитесь, как хук useMediaQuery использует хук хранилища.

Многие API браузера являются внешними хранилищами, которые можно подключить с помощью useSyncExternalStore: matchMedia — для контрольных точек, navigator.onLine — для подключения, адрес и хранилище — для навигации и синхронизации между вкладками, а также наблюдатели ориентации, пересечений и изменения размера.

У всех одинаковая структура: функция подписки, добавляющая и удаляющая слушателей, и стабильный getSnapshot. Объединяйте их в такие хуки, как useMediaQuery, useOnlineStatus и useWindowSize.