Concurrent Rendering 도입으로 UI Blocking Time 40-60% 감소

Context

비동기 작업을 Blocking 이벤트로 처리하며 발생하는 UI 프리징 및 응답성 저하 문제 분석. Loading 상태의 수동 관리와 모든 네트워크 응답에 따른 컴포넌트 리렌더링으로 인한 사용자 경험 훼손 확인.

Technical Solution

• Urgent와 Transition으로 구분된 Dual Update Lane 아키텍처 설계
• User Input 등 즉각적 반응이 필요한 작업을 Urgent Lane에 할당하여 즉시 렌더링
• Data Fetching 등 무거운 계산 작업을 Transition Lane으로 분리하여 우선순위 조정
• startTransition을 통한 렌더링 작업의 중단, 일시 정지 및 재개 가능 구조 구현
• 최신 입력 발생 시 진행 중인 이전 Transition 작업을 자동으로 폐기하는 Interruption 메커니즘 적용
• useOptimistic 훅을 통한 서버 응답 전 예상 결과 선반영으로 체감 대기 시간 제거

Impact

• 무거운 UI 환경에서 Blocking Time 40-60% 감소
• Transition 추적을 위한 메모리 오버헤드 5-10% 증가 발생