Skip to content

Fix React Compiler memoization error in I18nProvider #415

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hotlong merged 2 commits into from
Feb 9, 2026
Merged

Fix React Compiler memoization error in I18nProvider #415

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9bcfb47
Initial plan
Copilot Feb 9, 2026
533f7f2
Fix React Compiler memoization error in i18n provider
Copilot Feb 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/i18n/src/provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export interface I18nProviderProps {
export function I18nProvider({ config, instance: externalInstance, children }: I18nProviderProps) {
const i18nInstance = useMemo(
() => externalInstance || createI18n(config),
[externalInstance], // eslint-disable-line react-hooks/exhaustive-deps
[externalInstance, config],
);
Comment on lines 43 to 47
Copy link

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With config in the dependency array, any caller passing an inline object literal (e.g. the docs/examples use config={{ defaultLanguage: 'zh' }}) will cause this memo to invalidate on every render and repeatedly run createI18n(config) (which calls i18next.createInstance().init(...)). Consider documenting that config must be referentially stable (memoized) or restructuring the provider so it only recreates the instance when config values meaningfully change.

Copilot uses AI. Check for mistakes.
Comment on lines 44 to 47
Copy link

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that config can trigger a new i18nInstance, language state is still initialized only once from the initial instance. If config changes and a new instance is created, language/direction can become out of sync with the new instance until a languageChanged event fires (which may never happen). Consider syncing language when i18nInstance changes (e.g., set it to i18nInstance.language || 'en' on instance change).

Copilot uses AI. Check for mistakes.

const [language, setLanguage] = useState(i18nInstance.language || 'en');
Expand Down
Loading