Description
The application currently handles text translation on a per-page basis using repeated local state and effects. As the number of pages grows, this approach leads to duplicated logic and makes internationalization difficult to scale and maintain.
This refactor proposes introducing a centralized and reusable translation mechanism that can be consumed across all pages.
Current Problem
-
Translation logic is duplicated across components.
-
Each page manually manages:-> language state
->useEffect for translation
-> fallback handling
-
This increases maintenance cost, chances of inconsistent behavior, risk of missing translations on new pages.
-
With 30+ pages, the current approach does not scale well.
Suggested Improvement
Introduce a global reusable hook, e.g. useTranslation, that:
- Reads the active language from a single source (context / localStorage).
- Provides a helper function like t(key: string) to translate text.
- Automatically reacts to language changes and triggers re-render.
- Optionally caches translations to avoid repeated API calls.
Benefits
- Eliminates repeated translation logic.
- Improves code readability and consistency.
- Makes internationalization scalable for future pages.
- Reduces onboarding effort for new contributors.
- Aligns with common i18n patterns used in React applications.
Additional Context
This refactor builds on recent improvements to real-time language switching and full Home page translation. Centralizing translation logic will help apply the same behavior consistently across the entire app.
Description
The application currently handles text translation on a per-page basis using repeated local state and effects. As the number of pages grows, this approach leads to duplicated logic and makes internationalization difficult to scale and maintain.
This refactor proposes introducing a centralized and reusable translation mechanism that can be consumed across all pages.
Current Problem
Translation logic is duplicated across components.
Each page manually manages:-> language state
->useEffect for translation
-> fallback handling
This increases maintenance cost, chances of inconsistent behavior, risk of missing translations on new pages.
With 30+ pages, the current approach does not scale well.
Suggested Improvement
Introduce a global reusable hook, e.g. useTranslation, that:
Benefits
Additional Context
This refactor builds on recent improvements to real-time language switching and full Home page translation. Centralizing translation logic will help apply the same behavior consistently across the entire app.