# useTimeZone (/docs/hooks/use-time-zone)





`useTimeZone` resolves the zone a component should interpret instants in. Precedence is **prop →
provider → `"auto"`**:

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

const timeZone = useTimeZone(props.timeZone);

new Intl.DateTimeFormat(locale, { timeStyle: 'short', timeZone }).format(instant);
```

The provider half is [`IntlProvider`](/docs/intl).

Unlike [`useLocale`](/docs/hooks/use-locale), this defaults to `"auto"` — following the host —
because a wrong zone is wrong data rather than an unfamiliar format. That costs a client-only app
nothing, and under SSR it is still mismatch-free: the server renders `DEFAULT_TIME_ZONE` and the
real zone arrives after hydration.

## Usage [#usage]

Only the zone is set here; the locale stays on its own default. The instant is the same in every
case — 21:30 UTC, which is already the following day in Tokyo.

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

## API [#api]

<TypeTable
  type="{
  override: {
    type: 'string',
    description: 'The component\'s own timeZone prop. A concrete IANA zone, or &#x22;auto&#x22; to follow the host. Wins over the provider when set.',
  },
}"
/>

Returns a `string` — always a concrete IANA zone name.