React Programming Tutorials, Guides & Best Practices

Create routes.js:

import Home from './pages/Home';
import About from './pages/About';

export const routes = (t) => [
  {
    path: `/${t('routes.home')}`,
    element: <Home />,
  },
  {
    path: `/${t('routes.about')}`,
    element: <About />,
  },
];

• ✅ Use language-based subpaths: /en, /fr, /ar
• ✅ Generate hreflang tags for each locale
• ✅ Translate meta tags: <title>, <meta description>
• ✅ Avoid client-only routing for indexable pages
• ✅ Pre-render pages via SSR (e.g., with Next.js)

Use IP detection (via backend or service like IPinfo):

Create a new file: src/i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

// Import translation files
import en from './locales/en.json';
import fr from './locales/fr.json';

i18n
  .use(LanguageDetector) // Detects user language
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      fr: { translation: fr },
    },
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // React already escapes
    },
    detection: {
      order: ['localStorage', 'navigator', 'htmlTag'],
      caches: ['localStorage'],
    },
  });

export default i18n;

However, for large-scale applications requiring complex state interactions, middleware, and extensive tooling, Redux might still be the preferred choice.

Zustand presents a compelling alternative to Redux for state management in React applications. Its minimalistic API, ease of use, and performance optimizations make it suitable for a wide range of projects, from simple applications to more complex systems.

For components that perform heavy computations, useMemo can cache the result of a calculation, recomputing it only when its dependencies change.([Content That Scales][5])

import React, { useState, useMemo } from 'react';

function ExpensiveComponent({ data }) {
  const processedData = useMemo(() => {
    // Expensive computation
    return data.map(item => /* processing */ item);
  }, [data]);

  return <div>{/* render processedData */}</div>;
}