I18nProvider breaks client hydration in TanStack Start
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
TanStack Start utilizes server-side rendering (SSR), which requires wrapping the application with `I18nProvider` to ensure that the locale of the content rendered on the server matches the locale expected by the browser. This requirement is outlined in the [documentation guide](https://arc.net/l/quote/tvsgdvyw).
However, there appears to be an issue with the `I18nProvider` when used within this framework, as it is causing hydration errors.
### 🤔 Expected Behavior?
Hydration should work flawlessly.
### 😯 Current Behavior
Hydration breaks when the application is wrapped with `I18nProvider` and causes the entire page to go blank for a split second as it switches to client rendering.
React warning:
```
Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.
```
### 💁 Possible Solution
From what I've gathered, `useDefaultLocale()` hook seems to be the culprit here.
https://github.com/adobe/react-spectrum/blob/e14088a7edc44422a1135a9412a99cbbc96c1518/packages/%40react-aria/i18n/src/context.tsx#L29-L31
https://github.com/adobe/react-spectrum/blob/9b249e0479f142919ac67cda322a77eb36d585ac/packages/%40react-aria/i18n/src/useDefaultLocale.ts#L65-L78
Perhaps we should update the state (line 70) using `startTransition`? Not sure, I'm not very Suspense-pilled.
### 🔦 Context
_No response_
### 🖥️ Steps to Reproduce
https://stackblitz.com/edit/tanstack-router-ugkb9t?file=app%2Froutes%2F__root.tsx
Omitting `I18nProvider` gets rid of the above-mentioned React warning in the console logs.
### Version
1.5.0
### What browsers are you seeing the problem on?
Firefox, Chrome, Safari, Microsoft Edge
### If other, please specify.
_No response_
### What operating system are you using?
macOS 15.1
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.