0Pricing
React Academy · Lesson

Language Switcher & Lazy-Loading Translations

Build a locale toggle and load translation bundles on demand to reduce initial size.

Language Switcher & Lazy-Loading Translations is a free React Academy lesson on CoddyKit — lesson 4 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 build a language switcher component and configure i18next to load translation bundles on demand, reducing the initial JavaScript payload.

Simple Language Switcher

Call i18n.changeLanguage() on button click to switch the active language. All components using useTranslation will re-render with the new language automatically.
function LanguageSwitcher() {
  const { i18n } = useTranslation();
  return (
    <div>
      {['en', 'tr', 'fr'].map(lng => (
        <button
          key={lng}
          onClick={() => i18n.changeLanguage(lng)}
          style={{ fontWeight: i18n.language === lng ? 'bold' : 'normal' }}
        >
          {lng.toUpperCase()}
        </button>
      ))}
    </div>
  );
}

Persisting Language Selection

Persist the selected language in localStorage so it survives page reloads. The LanguageDetector plugin handles this automatically with the `localStorage` detector order.
i18n.init({
  detection: {
    order: ['localStorage', 'navigator'],
    caches: ['localStorage'],
  },
});

Why Lazy-Load Translations?

Including all translations in the JavaScript bundle increases initial load time. Lazy loading sends only the default language on first load and fetches other languages only when the user switches.

Configuring the HTTP Backend

The i18next-http-backend plugin fetches translation files from a URL pattern. Translations live in the `public/` folder and are served as static assets — no server-side code needed.
import Backend from 'i18next-http-backend';

i18n.use(Backend).init({
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json',
  },
  ns: ['common', 'auth'],
  defaultNS: 'common',
});

Adding Translation Files

Create one JSON file per language per namespace in `public/locales/`. The HTTP backend fetches them automatically when the language or namespace is first needed.
public/locales/
  en/common.json
  en/auth.json
  tr/common.json
  tr/auth.json

Showing a Loading State During Language Switch

After calling changeLanguage(), i18next loads the new language's files asynchronously. Subscribe to the `i18n.on('languageChanged')` event or check `i18n.isInitialized` to show a loading spinner.
const [switching, setSwitching] = useState(false);

const change = async (lng) => {
  setSwitching(true);
  await i18n.changeLanguage(lng);
  setSwitching(false);
};

Lazy-Loading Specific Namespaces

Load a namespace only when it is first needed using `i18n.loadNamespaces(['dashboard'])`. Call this in useEffect when a dashboard route mounts, avoiding loading it for unauthenticated users.
useEffect(() => {
  i18n.loadNamespaces('dashboard');
}, []);

CDN for Translations

For production, host translation files on a CDN (S3 + CloudFront). Update the `loadPath` to the CDN URL. This separates translation updates from code deployments.
backend: {
  loadPath: 'https://cdn.example.com/locales/{{lng}}/{{ns}}.json',
}

Locale in the URL

Many apps embed the locale in the URL (e.g. /en/products, /tr/products). Combine React Router with i18n: read the locale from the URL param, call changeLanguage, and update the URL when the user switches.

Quick Check

What does the i18next-http-backend plugin do?

Recap

Build a language switcher with i18n.changeLanguage(). Persist selection with localStorage detector. Use i18next-http-backend to lazy-load translation files. Show loading state during language switch. Host files on a CDN for production.

Course Complete

Congratulations! You finished **Internationalisation (i18n) in React**. You can now set up react-i18next, translate strings with namespaces, handle plurals and interpolation, and lazy-load translation files.

Frequently asked questions

Is the “Language Switcher & Lazy-Loading Translations” lesson free?

Yes — the full text of “Language Switcher & Lazy-Loading Translations” 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 “Language Switcher & Lazy-Loading Translations”?

Build a locale toggle and load translation bundles on demand to reduce initial size. 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 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Language Switcher & Lazy-Loading Translations” 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

  1. Setting Up react-i18next
  2. Using the useTranslation Hook
  3. Pluralisation & Interpolation
  4. Language Switcher & Lazy-Loading Translations
← Back to React Academy