Internationalization (i18n) in React
5 questions foundWhat is internationalization in a React app and why is it important?
Beginner Internationalization, often shortened to i18n, means building an app so it can easily show text in different languages for different users around the world. Instead of hardcoding English text everywhere, you store text in translation files and display the correct one based on the user's chosen language.
// en.json
{ "welcome": "Welcome to our site" }
// fr.json
{ "welcome": "Bienvenue sur notre site" }
function Welcome() {
const { t } = useTranslation();
return <h1>{t('welcome')}</h1>;
}
Real-world example An online store expands into new countries by adding translation files for French and Spanish, letting the exact same website automatically show the correct language for each visitor without rewriting any components.
Common follow-ups: How does the app know which language to show a new visitor by default?;What is the difference between internationalization and localization?
Custom Hooks;State Management
How does the react i18next library help manage translations in a React app?
Intermediate react i18next lets you organize translated text into separate files for each language, and provides a useTranslation hook that gives your components a simple function to look up the correct translated text based on the currently selected language, including support for things like pluralization and inserting dynamic values.
import { useTranslation } from 'react-i18next';
function Greeting({ name }) {
const { t } = useTranslation();
return <p>{t('greeting', { name })}</p>;
}
// translation file: { "greeting": "Hello, {{name}}" }
Real-world example A travel booking app displays a personalized greeting with the traveler's name inserted correctly into the sentence, using react i18next to combine a translated template with dynamic user data.
Common follow-ups: How would you switch the app's language while it is already running, without reloading the page?;How does react i18next handle a missing translation for a certain language?
Context API;Components & JSX
How do you handle pluralization correctly across different languages in an internationalized React app?
Advanced Different languages have very different rules for plurals, some with more than just a singular and plural form. Translation libraries like react i18next let you define separate translations for different count ranges, and automatically pick the correct one based on both the language and the actual number being displayed.
// translation file
{
"item_one": "You have {{count}} item",
"item_other": "You have {{count}} items"
}
function CartCount({ count }) {
const { t } = useTranslation();
return <p>{t('item', { count })}</p>;
}
Real-world example A shopping cart correctly shows You have 1 item versus You have 3 items in English, and automatically shows the correct grammatically different forms in a language like Polish that has more complex plural rules.
Common follow-ups: Why do some languages need more than two plural forms while English only needs two?;How would you test that pluralization works correctly for every supported language?
Testing;Design Patterns in React
How do you handle right to left languages, like Arabic, in a React app?
Intermediate You set the direction attribute on your page, usually to rtl for right to left languages, which flips the layout so text and elements read from right to left instead of left to right. Your CSS may also need adjustments so spacing and icons that assume a left to right layout still look correct when flipped.
function App({ language }) {
const direction = language === 'ar' ? 'rtl' : 'ltr';
return (
<div dir={direction}>
<MainContent />
</div>
);
}
Real-world example An app expanding into Middle Eastern markets automatically flips its entire layout to read right to left for Arabic speaking users, while keeping the normal left to right layout for everyone else.
Common follow-ups: What specific CSS properties commonly need special handling for right to left layouts?;How do you test that a right to left layout looks correct without knowing Arabic yourself?
Styling in React (CSS Modules Styled Components & Tailwind);Accessibility (a11y) in React
How would you let a user switch the language of an app using a simple dropdown menu?
Beginner You store the currently selected language in state or context, and a select dropdown lets the user change that value. Whenever the language changes, the translation library updates so all the text on the page immediately switches to the newly chosen language.
function LanguageSwitcher() {
const { i18n } = useTranslation();
return (
<select onChange={(e) => i18n.changeLanguage(e.target.value)}>
<option value="en">English</option>
<option value="fr">French</option>
</select>
);
}
Real-world example A website's header includes a simple language dropdown, and choosing a new language instantly updates every piece of translated text on the page, without needing to reload the browser.
Common follow-ups: How would you remember the user's chosen language the next time they visit the site?;Should the selected language also affect how dates and numbers are formatted?
State Management;Custom Hooks