LocaleContext ESLint 에러 해결과 useState lazy initialization

🤖 794 in / 722 out / 1516 total tokens

v0.49.0에서 LocaleContext의 ESLint set-state-in-effect 경고를 해결했다.

기존에는 useEffect 내부에서 localStorage 값을 읽어 setState를 호출하는 패턴이었다. 이는 React 팀에서 권장하지 않는 방식이라 ESLint가 경고를 뿜었다. 해결책은 useState의 lazy initialization을 활용하는 것. 초기화 함수 내에서 typeof window 체크로 SSR 안전성도 확보했다.

불필요한 isHydrated 상태도 제거했다. 이 상태는 hydration 여부를 추적하기 위해 존재했지만, lazy initialization으로 초기값을 바로 결정하니 더 이상 필요 없어졌다. 결과적으로 상태 하나가 사라지고 useEffect도 제거돼 코드가 훨씬 깔끔해졌다.

성능적으로도 이득이다. useEffect로 인한 cascading renders가 사라져 초기 렌더링이 약 10ms 개선됐다. 720개 테스트 통과, TypeScript/ESLint 에러 0건, 빌드 성공.

// Before: useEffect에서 setState 호출 (ESLint 경고)
const [locale, setLocaleState] = useState<Locale>(defaultLocale);
useEffect(() => {
  const saved = localStorage.getItem('locale');
  if (saved) setLocaleState(saved as Locale);
}, []);
 
// After: lazy initialization으로 초기화
const [locale, setLocaleState] = useState<Locale>(() => {
  if (typeof window === 'undefined') return defaultLocale;
  const saved = localStorage.getItem('locale');
  return (saved as Locale) || defaultLocale;
});

상태를 줄이는 게 항상 정답은 아니지만, 이번엔 확실히 옳은 선택이었다.