React Academy · Lesson

Using the useTranslation Hook

Replace hardcoded strings with t() calls and organise translation JSON files.

Using the useTranslation Hook is a free React Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will use the useTranslation hook to access the t() function, translate strings in components, and organise translation JSON files by namespace.

The useTranslation Hook

Call useTranslation() inside a component to get the `t` translation function and the `i18n` instance. Pass the namespace name if using namespaced translations.

import { useTranslation } from 'react-i18next';

function Header() {
  const { t } = useTranslation('common');
  return <h1>{t('app_title')}</h1>;
}

Basic Translation Keys

Create a JSON file for each language and namespace. Keys are dot-accessible strings. Flat keys are simple; nested keys use dot notation.

// public/locales/en/common.json
{
  "app_title": "My App",
  "nav": {
    "home": "Home",
    "about": "About"
  }
}

Dot-Notation Keys

Access nested keys with dot notation in the t() function: `t('nav.home')` reads `nav -> home` from the JSON.

const { t } = useTranslation('common');
return <a href="/">{t('nav.home')}</a>;

Default Namespace

Configure a `defaultNS` in i18n init so you can call useTranslation() without arguments and keys resolve to the default namespace automatically.

i18n.init({ defaultNS: 'common', ... });

// No namespace argument needed
const { t } = useTranslation();
t('app_title'); // resolves in 'common'

Accessing Multiple Namespaces

Pass an array to useTranslation to access multiple namespaces. Prefix keys with the namespace followed by a colon.

const { t } = useTranslation(['common', 'auth']);

t('common:app_title');
t('auth:login');

Trans Component for JSX Content

When a translated string contains HTML or React components, use the Trans component. It supports placeholders that map to React components.

import { Trans } from 'react-i18next';

// JSON: "tos": "Read our <1>Terms</1>"
<Trans i18nKey="tos">
  Read our <a href="/terms">Terms</a>
</Trans>

Translation File Structure

Organise JSON files as `public/locales/{lang}/{ns}.json`. Keep keys semantic and grouped by feature. Avoid deeply nested keys — 2 levels is usually enough.

public/
  locales/
    en/
      common.json
      auth.json
      dashboard.json
    tr/
      common.json
      auth.json

Changing Language at Runtime

Use `i18n.changeLanguage(lng)` to switch the active language programmatically. React components using useTranslation re-render automatically.

const { i18n } = useTranslation();

<button onClick={() => i18n.changeLanguage('tr')}>Turkish</button>

Detecting the Active Language

Read `i18n.language` to get the current active locale. Use it to render a flag or highlight the active language button.

const { i18n } = useTranslation();
return <p>Current lang: {i18n.language}</p>;

Quick Check

How do you access a nested translation key 'nav.home' from the 'common' namespace?

Recap

useTranslation gives you the t() function. Organise keys in namespace JSON files. Use dot notation for nested keys. Switch languages with i18n.changeLanguage. Use the Trans component for JSX-containing strings.

Up Next

Next lesson: **Pluralisation & Interpolation** — you will handle count-based plural forms and insert dynamic values into translated strings.

Frequently asked questions

Is the “Using the useTranslation Hook” lesson free?

Yes — the full text of “Using the useTranslation Hook” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Using the useTranslation Hook”?

Replace hardcoded strings with t() calls and organise translation JSON files. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Using the useTranslation Hook” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Setting Up react-i18next
Using the useTranslation Hook
Pluralisation & Interpolation
Language Switcher & Lazy-Loading Translations

← Back to React Academy