From 2691a66327d6dfc1f475062de95b0eba98e483b3 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sat, 7 Feb 2026 01:52:37 +0000 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20Optimize=20LanguageProvider?= =?UTF-8?q?=20initialization?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 💡 What: Optimized `LanguageProvider` to use lazy state initialization for `language` and removed `isInitialized` state. 🎯 Why: The previous implementation triggered a second render on mount because it initialized state to 'de' and then updated it in a `useEffect`. 📊 Impact: Reduces initial render count of the entire application by 50% (from 2 to 1). 🔬 Measurement: Verified with `src/i18n/__tests__/initialRender.test.tsx` which confirms the render count is now 1. Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com> --- src/i18n/__tests__/initialRender.test.tsx | 36 +++++++++++++++++++++++ src/i18n/index.tsx | 14 ++------- 2 files changed, 39 insertions(+), 11 deletions(-) create mode 100644 src/i18n/__tests__/initialRender.test.tsx diff --git a/src/i18n/__tests__/initialRender.test.tsx b/src/i18n/__tests__/initialRender.test.tsx new file mode 100644 index 0000000..5584d4e --- /dev/null +++ b/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( + + + + ); + + // 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); + }); +}); diff --git a/src/i18n/index.tsx b/src/i18n/index.tsx index 7be82f7..9b428a6 100644 --- a/src/i18n/index.tsx +++ b/src/i18n/index.tsx @@ -27,13 +27,7 @@ function getInitialLanguage(): Language { } export function LanguageProvider({ children }: { children: ReactNode }) { - const [language, setLanguageState] = useState('de'); - const [isInitialized, setIsInitialized] = useState(false); - - useEffect(() => { - setLanguageState(getInitialLanguage()); - setIsInitialized(true); - }, []); + const [language, setLanguageState] = useState(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(() => ({ language,