Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
5 Skipped Deployments
|
There was a problem hiding this comment.
Greptile Summary
This PR fixes React hydration errors in the General Translation (GT) library by ensuring consistent initialization of translation status between server-side rendering and client-side hydration. The changes introduce proper handling of initialTranslationsStatus throughout the provider chain.
The fix addresses a common SSR hydration issue where server-rendered content must exactly match client-side initial render. Previously, the translationsStatus state was initialized differently on server vs client, causing React to detect DOM mismatches during hydration. The solution follows the existing pattern used for translations state.
Key changes include:
- Adding
initialTranslationsStatusfield toClientProviderPropstype definition with properTranslationsStatusimport - Modifying the Next.js
GTProviderto fetch and pass cached translation status to the client provider - Updating
ClientProviderto conditionally initializetranslationsStatusstate using server-provided data in production, while maintainingnullinitialization in development mode (whendevApiKeyis present)
This follows the established architectural pattern where server-side providers prepare initial state data and pass it to client-side providers for consistent hydration. The fix maintains backward compatibility and respects the development vs production environment distinctions already present in the codebase.
Confidence score: 5/5
• This PR is very safe to merge and addresses a clear hydration bug with a well-established solution pattern
• The implementation follows existing patterns in the codebase and maintains proper type safety and backward compatibility
• No files need additional attention - the changes are straightforward and consistent across the provider chain
3 files reviewed, 1 comment
| const translations = await cachedTranslationsPromise; | ||
| const translationsStatus: TranslationsStatus = translationRequired | ||
| ? I18NConfig.getCachedTranslationsStatus(locale) | ||
| : ({} as any); |
There was a problem hiding this comment.
style: The type assertion ({} as any) bypasses type safety. Consider using ({} as TranslationsStatus) for better type safety.
| : ({} as any); | |
| : ({} as TranslationsStatus); |
No description provided.