I18nProvider breaks client hydration in TanStack Start

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.

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.

react-spectrum/packages/@react-aria/i18n/src/context.tsx

Lines 29 to 31 in e14088a

    
           export function I18nProvider(props: I18nProviderProps) { 
        
             let {locale, children} = props; 
        
             let defaultLocale = useDefaultLocale();

react-spectrum/packages/@react-aria/i18n/src/useDefaultLocale.ts

Lines 65 to 78 in 9b249e0

    
           useEffect(() => { 
        
             if (listeners.size === 0) { 
        
               window.addEventListener('languagechange', updateLocale); 
        
             } 
        
             listeners.add(setDefaultLocale); 
        
             return () => { 
        
               listeners.delete(setDefaultLocale); 
        
               if (listeners.size === 0) { 
        
                 window.removeEventListener('languagechange', updateLocale); 
        
               } 
        
             }; 
        
           }, []);

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

This is likely related to #7344

	export function I18nProvider(props: I18nProviderProps) {
	let {locale, children} = props;
	let defaultLocale = useDefaultLocale();

	useEffect(() => {
	if (listeners.size === 0) {
	window.addEventListener('languagechange', updateLocale);
	}

	listeners.add(setDefaultLocale);

	return () => {
	listeners.delete(setDefaultLocale);
	if (listeners.size === 0) {
	window.removeEventListener('languagechange', updateLocale);
	}
	};
	}, []);