# useLocale (/docs/hooks/use-locale)





`useLocale` resolves the locale a component should format in. Precedence is **prop → provider →
`"en-US"`**, so a component passes its own prop straight in and gets back something it can hand to
`Intl`:

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

const locale = useLocale(props.locale);

new Intl.DateTimeFormat(locale, { dateStyle: 'long' }).format(date);
```

The provider half is [`IntlProvider`](/docs/intl). With none mounted it returns `DEFAULT_LOCALE`
rather than the host's locale — deliberately, so server and client markup can't disagree. Pass
`"auto"` to opt into following the browser.

## Usage [#usage]

Only the locale is set here; the time zone stays on its own default, because the two are
independent.

<Preview code="&#x22;const locale = useLocale();\n\nnew Intl.DateTimeFormat(locale, {\n  dateStyle: 'full',\n  timeStyle: 'short',\n  timeZone: useTimeZone(),\n}).format(instant)&#x22;">
  <LocaleDemo />
</Preview>

## API [#api]

<TypeTable
  type="{
  override: {
    type: 'string',
    description: 'The component\'s own locale prop. A concrete BCP-47 tag, or &#x22;auto&#x22; to follow the browser. Wins over the provider when set.',
  },
}"
/>

Returns a `string` — always a concrete tag.

## SSR [#ssr]

`"auto"` is resolved through `useSyncExternalStore` with a fixed server snapshot
(`DEFAULT_LOCALE`), the same shape as [`useMediaQuery`](/docs/hooks/use-media-query) and
[`useLocalStorage`](/docs/hooks/use-local-storage): the server and the first client render agree by
construction, and the real value arrives right after hydration. See
[Internationalization](/docs/intl) for when that one-frame correction is visible.