Skip to content

fix: use gt hydration error#529

Merged
ErnestM1234 merged 1 commit intomainfrom
e/fix-client-usegt
Jul 30, 2025
Merged

fix: use gt hydration error#529
ErnestM1234 merged 1 commit intomainfrom
e/fix-client-usegt

Conversation

@ErnestM1234
Copy link
Contributor

No description provided.

@ErnestM1234 ErnestM1234 requested a review from a team as a code owner July 30, 2025 23:24
@vercel
Copy link

vercel bot commented Jul 30, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
gt-docs 🔄 Building (Inspect) Visit Preview 💬 Add feedback Jul 30, 2025 11:24pm
5 Skipped Deployments
Name Status Preview Comments Updated (UTC)
example-ai-chatbot ⬜️ Ignored (Inspect) Jul 30, 2025 11:24pm
example-create-react-app ⬜️ Ignored (Inspect) Jul 30, 2025 11:24pm
example-gt-next-starter ⬜️ Ignored (Inspect) Jul 30, 2025 11:24pm
example-next-create-app ⬜️ Ignored (Inspect) Jul 30, 2025 11:24pm
example-vite-create-app ⬜️ Ignored (Inspect) Jul 30, 2025 11:24pm

@ErnestM1234 ErnestM1234 merged commit c77c83d into main Jul 30, 2025
7 of 8 checks passed
@ErnestM1234 ErnestM1234 deleted the e/fix-client-usegt branch July 30, 2025 23:25
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

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 initialTranslationsStatus field to ClientProviderProps type definition with proper TranslationsStatus import
  • Modifying the Next.js GTProvider to fetch and pass cached translation status to the client provider
  • Updating ClientProvider to conditionally initialize translationsStatus state using server-provided data in production, while maintaining null initialization in development mode (when devApiKey is 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

Edit Code Review Bot Settings | Greptile

const translations = await cachedTranslationsPromise;
const translationsStatus: TranslationsStatus = translationRequired
? I18NConfig.getCachedTranslationsStatus(locale)
: ({} as any);
Copy link
Contributor

Choose a reason for hiding this comment

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

style: The type assertion ({} as any) bypasses type safety. Consider using ({} as TranslationsStatus) for better type safety.

Suggested change
: ({} as any);
: ({} as TranslationsStatus);

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.

1 participant