Builder.shin

React 18 Beta의 Concurrent Rendering 실험

배경

6월에 React 18 Working Group이 공개되고, 이번 주 드디어 Beta 버전이 릴리즈됐다. 관리자 대시보드의 대용량 테이블 렌더링이 느린 문제가 있었는데, Concurrent Rendering으로 개선할 수 있을지 테스트해봤다.

기존 문제

검색어 입력 시 5000개 row를 필터링하는데, 타이핑이 버벅이는 현상이 있었다. debounce를 적용했지만 UX가 여전히 부자연스러웠다.

const [query, setQuery] = useState('');
const filtered = data.filter(item => 
  item.name.includes(query)
); // 매 입력마다 blocking

startTransition 적용

React 18의 startTransition을 사용해 필터링을 낮은 우선순위로 처리했다.

import { startTransition } from 'react';

const [query, setQuery] = useState('');
const [deferredQuery, setDeferredQuery] = useState('');

const handleChange = (e) => {
  setQuery(e.target.value); // 즉시 반영
  startTransition(() => {
    setDeferredQuery(e.target.value); // 낮은 우선순위
  });
};

const filtered = data.filter(item => 
  item.name.includes(deferredQuery)
);

결과

입력 필드는 즉각 반응하고, 테이블 업데이트는 자연스럽게 지연된다. 사용자 입력을 blocking하지 않아 체감 성능이 확실히 좋아졌다.

주의사항

  • 아직 Beta라 프로덕션 적용은 보류
  • isPending 상태로 로딩 인디케이터 표시 가능
  • 모든 상태 업데이트를 transition으로 감쌀 필요는 없음

React 18 정식 릴리즈 때 본격 도입 검토 예정이다.

React 18 Beta의 Concurrent Rendering 실험