Fix React Compiler memoization error in I18nProvider#415
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Fixes CI failure from eslint-plugin-react-hooks@7.0.1 (react-hooks/preserve-manual-memoization) by correcting useMemo dependencies in I18nProvider, aligning memoization with the values used to create the i18n instance.
Changes:
- Add
configto theuseMemodependency array used to create/memoize thei18nInstance. - Remove the prior
eslint-disablesuppression for hook dependencies.
| export function I18nProvider({ config, instance: externalInstance, children }: I18nProviderProps) { | ||
| const i18nInstance = useMemo( | ||
| () => externalInstance || createI18n(config), | ||
| [externalInstance], // eslint-disable-line react-hooks/exhaustive-deps | ||
| [externalInstance, config], | ||
| ); |
There was a problem hiding this comment.
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.
| const i18nInstance = useMemo( | ||
| () => externalInstance || createI18n(config), | ||
| [externalInstance], // eslint-disable-line react-hooks/exhaustive-deps | ||
| [externalInstance, config], | ||
| ); |
There was a problem hiding this comment.
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).
CI failing on
eslint-plugin-react-hooks@7.0.1'spreserve-manual-memoizationrule. The rule enforces correct dependencies inuseMemohooks and cannot be suppressed with eslint-disable comments.Changes
configtouseMemodependency arrayThe
I18nProvidercomponent was memoizing the i18n instance based only onexternalInstance, ignoringconfigdespite using it:This ensures the i18n instance is recreated when config changes, and allows the React Compiler to optimize correctly.
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.