# General Translation React SDKs (gt-react, gt-next): useMessages
URL: https://generaltranslation.com/en-US/docs/react/reference/hooks/use-messages.mdx
---

title: useMessages
description: Resolve strings registered with msg into the active locale with General Translation gt-react. API reference for useMessages.

---

The `useMessages` hook returns a function that resolves encoded strings created with [`msg`](/docs/react/reference/functions/msg) into the active locale. Use it to translate strings that were registered at module scope, outside a component.

*Available in `gt-react`, `gt-next`, `gt-tanstack-start`, and `gt-react-native`. Examples import from `gt-react`; import from your framework's package instead.*

## Overview [#overview]

Register a string with `msg`, then resolve it with the function `useMessages` returns.

```tsx
const m = useMessages();

<p>{m(encodedString)}</p>;
```

*Note: In `gt-react`, call `useMessages` under a [`<GTProvider>`](/docs/react/reference/components/gt-provider). In `gt-next`, it also works in synchronous server components.*

## How it works [#how-it-works]

- **Resolves registered strings.** It looks up the translation for a string previously encoded by [`msg`](/docs/react/reference/functions/msg) and returns it in the active locale.
- **Pass-through.** `null` and `undefined` are returned unchanged.
- **Variable precedence.** When variables are passed to both `msg` and the resolver, the values passed to `msg` take precedence.
- **Build-time translation.** Like [`useGT`](/docs/react/reference/hooks/use-gt), translation happens at build time (or on demand in development), and variables are never translated.

## Parameters [#parameters]

`useMessages` takes no parameters.

## Returns [#returns]

**Type** `(encodedContent: string, options?: object) => string`

A function that resolves the encoded content from `msg` into the active locale.

| Name | Description | Type | Optional |
| --- | --- | --- | --- |
| `encodedContent` | The encoded string from `msg` to resolve. | `string` | No |
| `options` | Interpolation variables to pass to the encoded string. | `object` | Yes |

## Examples [#examples]

```tsx
import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Hello, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();
  return <p>{m(encodedGreeting)}</p>;
}
```

```tsx
import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Hello, {name}!');

export default function TranslateGreeting() {
  const m = useMessages();
  return <p>{m(encodedGreeting, { name: 'Bob' })}</p>; // "Hello, Bob!"
}
```

```tsx
import { msg, useMessages } from 'gt-react';

// Variables passed to msg() take precedence over those passed to m()
const encodedGreeting = msg('Hello, {name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();
  return <p>{m(encodedGreeting, { name: 'Bob' })}</p>; // "Hello, Alice!"
}
```

## Notes [#notes]

- `useMessages` resolves encoded strings from [`msg`](/docs/react/reference/functions/msg).
- In an async App Router component, use [`getMessages`](/docs/react/nextjs/reference/functions/get-messages) instead.
- Translations happen at build time (or on demand in development).