React 18 베타 Concurrent Rendering 도입 시 겪은 문제들

배경

사내 관리자 대시보드를 React 18 베타로 마이그레이션하기로 결정했다. 주요 목적은 Concurrent Rendering을 통한 UX 개선이었다. 특히 대용량 테이블 렌더링 시 UI 블로킹 문제를 해결하고 싶었다.

발생한 문제

1. Zustand 호환성 이슈

기존에 사용하던 Zustand 3.5 버전에서 state 업데이트가 batching되지 않는 현상이 발생했다. React 18의 automatic batching과 충돌하는 것으로 보였다.

// 예상: 1번 렌더링
// 실제: 2번 렌더링
setUser(newUser);
setLoading(false);

일단 Zustand 최신 버전(3.6.8)으로 업데이트하니 해결됐다.

2. useTransition 적용 범위 판단

모든 상태 업데이트에 useTransition을 적용할 수는 없었다. 실험 결과 500ms 이상 걸리는 렌더링에만 체감 효과가 있었다.

const [isPending, startTransition] = useTransition();

const handleFilter = (filters) => {
  startTransition(() => {
    setFilters(filters); // 무거운 테이블 재렌더링
  });
};

3. Suspense boundary 설정

Suspense를 너무 상위에 두니 전체 UI가 fallback으로 교체됐다. 적절한 단위로 쪼개는 게 중요했다.

결론

React 18 베타는 아직 프로덕션 적용이 이르다고 판단했다. 특히 써드파티 라이브러리 생태계가 따라오지 못한 부분이 많았다. 정식 릴리즈 후 재검토 예정이다.

당장은 코드 스플리팅과 virtualization으로 성능 문제를 우회하기로 했다.