Subscribing to Browser APIs

Browser media queries are a perfect external store. You can subscribe to a matchMedia query for dark mode or a breakpoint and re-render whenever the match state flips.

The subscribe function adds a change listener to the MediaQueryList, and getSnapshot returns its current matches boolean, giving you reactive access to responsive conditions.

Wrapping that logic into a useMediaQuery hook lets components ask whether a query matches with a single call. The hook builds a stable subscribe and getSnapshot around a given query string.

This produces a clean, reusable primitive for responsive behavior that stays consistent under concurrent rendering thanks to useSyncExternalStore.

The browser exposes online and offline events plus navigator.onLine. Subscribing to those events and reading the property gives you a live connectivity status inside React.

getSnapshot returns navigator.onLine, and subscribe attaches listeners for the online and offline events so the component updates as connectivity changes.

Bundling that into a useOnlineStatus hook lets any component show offline banners or disable actions when the network drops. The official React docs use this exact example to demonstrate the hook.

It is a small but illustrative case where an external browser signal maps cleanly to a piece of reactive state.

You can subscribe to navigation changes by listening for the popstate event and reading window.location in getSnapshot. This underpins simple custom routers built on the History API.

Because pushState does not emit popstate, custom routers often dispatch their own event so the snapshot updates on programmatic navigation too.

The storage event fires in other tabs when localStorage changes, which makes it an external store you can subscribe to. getSnapshot reads the current value, and subscribe listens for storage events.

This enables cross-tab synchronization, where updating a value in one tab reactively updates components in another.

The deviceorientation event reports the physical tilt of a device. Subscribing to it and reading the latest angles in getSnapshot turns motion data into reactive state.

This is useful for parallax effects or interactive visualizations that respond to how a phone is held.

IntersectionObserver tells you when an element enters or leaves the viewport. You can wrap it so subscribe creates the observer and getSnapshot returns the latest isIntersecting value.

This gives a reactive isVisible flag for lazy loading images, triggering animations, or implementing infinite scroll sentinels.

ResizeObserver reports element size changes. Wrapping it lets subscribe observe an element and getSnapshot return its current dimensions, so components react to layout changes precisely.

This is more efficient and accurate than listening to window resize when you care about a specific element rather than the whole viewport.

You can combine the resize event with the hook to build a useWindowSize that returns the current width and height. subscribe attaches a resize listener and getSnapshot reads window dimensions.

Remember to return a stable snapshot, caching the size object so unchanged dimensions do not cause re-renders, keeping the composition efficient.

Reason about how a useMediaQuery hook uses the store hook.

Many browser APIs are external stores you can bridge with useSyncExternalStore: matchMedia for breakpoints, navigator.onLine for connectivity, location and storage for navigation and cross-tab sync, plus orientation, intersection, and resize observers.

Each follows the same shape, a subscribe that attaches and removes listeners and a stable getSnapshot. Compose them into hooks like useMediaQuery, useOnlineStatus, and useWindowSize.