Skip to content

fix: prevent i18n singleton and React locale state desync (#1160)#1234

Open
wendyamoni-creator wants to merge 1 commit into
solutions-plug:mainfrom
wendyamoni-creator:fix/the-i18n-singleton-and-react-locale-state-can-pe
Open

fix: prevent i18n singleton and React locale state desync (#1160)#1234
wendyamoni-creator wants to merge 1 commit into
solutions-plug:mainfrom
wendyamoni-creator:fix/the-i18n-singleton-and-react-locale-state-can-pe

Conversation

@wendyamoni-creator

@wendyamoni-creator wendyamoni-creator commented Jul 27, 2026

Copy link
Copy Markdown

Summary

Fixes #1160 — the i18n singleton's currentLocale and the React-visible locale state from useI18n could permanently disagree when a locale in the Locale type (es, fr, de) had no corresponding entry in the translations object.

Root Cause

I18n.setLocale() guarded with if (locale in translations) but returned void. The useI18n wrapper called setLocaleState(newLocale) unconditionally, so React state would show (e.g.) 'es' while i18n.t() continued to resolve keys using 'en'.

Fix

frontend/src/lib/i18n.tssetLocale now returns boolean:

setLocale(locale: Locale): boolean {
  if (locale in translations) { ...; return true; }
  return false;
}

frontend/src/lib/hooks/useI18n.ts — state update is guarded:

const setLocale = (newLocale: Locale) => {
  const applied = i18n.setLocale(newLocale);
  if (applied) {
    setLocaleState(newLocale);
  }
};

Tests

  • Extended src/lib/__tests__/i18n.test.ts with boolean return value assertions and locale-unchanged checks for es/fr/de.
  • Added src/lib/hooks/__tests__/useI18n.test.ts (new file) covering:
    • Selecting 'en' updates both React state and singleton correctly
    • Selecting 'es', 'fr', 'de' leaves React state at 'en'
    • Core invariant: result.current.locale === i18n.getLocale() always holds

Checklist

i18n.setLocale() was a no-op for unimplemented locales (es/fr/de) but
returned void, so useI18n's wrapper always called setLocaleState()
regardless of whether the change actually applied. This left React state
showing e.g. 'es' while i18n.t() still rendered using 'en'.

Fix:
- I18n.setLocale() now returns boolean (true = applied, false = no-op)
- useI18n.setLocale() guards setLocaleState() behind that return value

Tests:
- Extend i18n.test.ts: assert return values and that internal locale
  stays 'en' after an unimplemented locale request
- Add useI18n.test.ts: assert React state and singleton stay in sync
  for both implemented ('en') and unimplemented (es/fr/de) locales

Closes solutions-plug#1160
@drips-wave

drips-wave Bot commented Jul 27, 2026

Copy link
Copy Markdown

@wendyamoni-creator Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] The i18n singleton and React locale state can permanently desync for unimplemented locales

1 participant