# useMediaQuery (/docs/hooks/use-media-query)





`useMediaQuery` tracks whether a media query currently matches, updating live as it changes. For a component that should respond to its own allocated space rather than the viewport, use [`useContainerQuery`](/docs/hooks/use-container-query) instead.

```tsx
import { useMediaQuery } from '@42-central/ui-react';

const isMobile = useMediaQuery('(width < 768px)');
```

SSR-safe via `useSyncExternalStore`: the hydration snapshot is always `false`, since a server can't know the visitor's viewport — the real match state is read in on the client shortly after mount.

## Usage [#usage]

Resize your browser window — the reported state tracks the real viewport width.

<Preview code="&#x22;const isNarrow = useMediaQuery('(width < 640px)');\n\n<p>{isNarrow ? 'Matches (< 640px)' : 'Does not match (≥ 640px)'}</p>&#x22;">
  <MediaQueryDemo />
</Preview>

## API [#api]

<TypeTable
  type="{
  query: {
    type: 'string',
    required: true,
    description: 'A media query string, passed directly to window.matchMedia.',
  },
}"
/>

Returns a `boolean` — `true` while the query matches.