fix: resolve React Compiler i18n caching issues in ChatView #11104
+117
−83
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixes partial internationalization failures caused by React Compiler aggressively caching translated values. Changes: - TranslationContext: Add i18n.language to translate callback dependency to force re-memoization when language changes - ChatView: Store translation keys instead of translated button text in state, compute translations at render time - ChatView: Remove redundant useState type annotations that may confuse React Compiler type inference - ChatView: Simplify button tooltip rendering by using pre-computed tooltip values from key mappings Closes #11100
Contributor
Author
Review complete. No issues found. The fix correctly addresses the React Compiler i18n caching issue by:
All translation keys have been verified to exist in the locale files. Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fixes partial internationalization failures caused by React Compiler aggressively caching translated values when the language changes.
Closes #11100
Changes
TranslationContext.tsx
i18n.languageto thetranslatecallback dependency arrayChatView.tsx
primaryButtonText/secondaryButtonTextstate variables to store translation keys (primaryButtonKey/secondaryButtonKey) instead of already-translated stringst()with the stored keys during render, ensuring fresh translationsprimaryButtonTooltipMapandsecondaryButtonTooltipMapto map button keys to their tooltip keys, simplifying the render logic<boolean>type annotations fromuseStatecalls that React Compiler may have issues inferringRoot Cause
The React Compiler (babel-plugin-react-compiler) aggressively memoizes values. When button text was stored as already-translated values (e.g.,
setPrimaryButtonText(t("chat:retry.title"))), the translated value was cached in state. When the user changed language, the state value remained stale because React Compiler did not recognize thatt()results depend oni18n.language.Solution
By storing translation keys instead of values, we ensure that:
t()function is called fresh on every renderTranslationContextproperly invalidates when language changes (viai18n.languagedependency)Testing
Important
Fixes React Compiler i18n caching issues by updating translation handling in
ChatView.tsxandTranslationContext.tsx.ChatView.tsxand computes translations at render time.i18n.languagetotranslatecallback dependencies to force re-memoization on language change.primaryButtonText/secondaryButtonTextto store keys (primaryButtonKey/secondaryButtonKey).primaryButtonText/secondaryButtonTextand tooltips at render time.<boolean>type annotations fromuseStatecalls.This description was created by
for 64f704a. You can customize this summary. It will automatically update as commits are pushed.