src/i18n/__tests__/initialRender.test.tsx

@@ -0,0 +1,36 @@
+// @vitest-environment jsdom
+import { render, act } from '@testing-library/react';
+import { LanguageProvider, useTranslation } from '../index';
+import { describe, it, expect } from 'vitest';
+
+describe('LanguageProvider Initial Render', () => {
+  it('should verify initial render count', async () => {
+    let renderCount = 0;
+
+    const Consumer = () => {
+      useTranslation();
+      renderCount++;
+      return null;
+    };
+
+    render(
+      <LanguageProvider>
+        <Consumer />
+      </LanguageProvider>
+    );
+
+    // Wait for any effects to run
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 10));
+    });
+
+    // After optimization, renderCount should be 1.
+    // Previously it was 2.
+    expect(renderCount).toBe(1);
+
+    // Verify lang attribute is set (getInitialLanguage defaults to 'de' in jsdom if window undefined,
+    // but in jsdom window IS defined. navigator.language usually defaults to en-US in jsdom)
+    // We just check it's set to something valid ('en' or 'de')
+    expect(['en', 'de']).toContain(document.documentElement.lang);
+  });
+});

src/i18n/index.tsx

@@ -27,13 +27,7 @@ function getInitialLanguage(): Language {
 }
 
 export function LanguageProvider({ children }: { children: ReactNode }) {
-  const [language, setLanguageState] = useState<Language>('de');
-  const [isInitialized, setIsInitialized] = useState(false);
-
-  useEffect(() => {
-    setLanguageState(getInitialLanguage());
-    setIsInitialized(true);
-  }, []);
+  const [language, setLanguageState] = useState<Language>(getInitialLanguage);
 
   const setLanguage = useCallback((lang: Language) => {
     setLanguageState(lang);
@@ -42,10 +36,8 @@ export function LanguageProvider({ children }: { children: ReactNode }) {
   }, []);
 
   useEffect(() => {
-    if (isInitialized) {
-      document.documentElement.lang = language;
-    }
-  }, [language, isInitialized]);
+    document.documentElement.lang = language;
+  }, [language]);
 
   const value = useMemo<LanguageContextType>(() => ({
     language,