How do you localize a React application?

React

The short answer

Localization (l10n) is adapting your app for different languages and regions. The typical approach is to use a library like react-i18next or react-intl, store translations in JSON files, and replace hardcoded strings with translation keys. You also need to handle date/number formatting, text direction (RTL), and pluralization rules.

The basic setup with react-i18next

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        welcome: 'Welcome, {{name}}!',
        items: '{{count}} item',
        items_plural: '{{count}} items',
      },
    },
    es: {
      translation: {
        welcome: '¡Bienvenido, {{name}}!',
        items: '{{count}} artículo',
        items_plural: '{{count}} artículos',
      },
    },
  },
  lng: 'en',
  fallbackLng: 'en',
});
import { useTranslation } from 'react-i18next';
function Header({ user }) {
  const { t } = useTranslation();
  return <h1>{t('welcome', { name: user.name })}</h1>;
}

Instead of hardcoding "Welcome, John!", you use t('welcome', { name: 'John' }). When the language changes to Spanish, it automatically shows "¡Bienvenido, John!".

Key things to handle

1. Date and number formatting:

// Use Intl API for locale-aware formatting
new Intl.DateTimeFormat('de-DE').format(new Date());
// "5.4.2026"
new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
}).format(1234.5);
// "1.234,50 €"

2. Pluralization:

Different languages have different plural rules. English has two forms (1 item, 2 items), but Arabic has six and Polish has four. Libraries like i18next handle this automatically.

3. Right-to-left (RTL) support:

Languages like Arabic and Hebrew read right-to-left. Use the dir attribute and CSS logical properties:

/* Use logical properties instead of physical ones */
margin-inline-start: 16px; /* instead of margin-left */
padding-inline-end: 8px; /* instead of padding-right */

4. Text expansion:

Translations are often longer than the English text. German text is typically 30% longer. Design your UI with flexible layouts that can handle different text lengths.

Interview Tip

Cover three things: translation files with a library like i18next, date/number formatting with the Intl API, and RTL support. Mentioning text expansion and CSS logical properties shows you have thought about the practical challenges of localization beyond just translating strings.

Why interviewers ask this

This question comes up at companies with international products. Interviewers want to see if you know the tools and the challenges beyond just string replacement — things like pluralization, RTL layouts, and locale-aware formatting. It shows you can build applications that work for users worldwide.

Table of Contents