React 18 Beta의 Concurrent Rendering 테스트

배경

지난주 React 18 베타가 공개되었다. 사내 대시보드 프로젝트에서 대용량 테이블 렌더링 시 입력 지연 이슈가 있었는데, 이번 기회에 Concurrent Features를 테스트해보기로 했다.

기존 문제

검색 필터 입력 시 5000개 이상의 행을 가진 테이블이 리렌더링되면서 입력이 버벅이는 현상이 있었다. debounce로 일부 해결했지만 근본적인 해결은 아니었다.

const [filter, setFilter] = useState('');
const filteredData = data.filter(item => 
  item.name.includes(filter)
);

startTransition 적용

React 18의 startTransition을 사용해 필터링 작업의 우선순위를 낮췄다.

import { startTransition } from 'react';

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

입력은 즉시 반영되고 무거운 렌더링은 지연되어 UX가 크게 개선되었다.

useDeferredValue

더 간단한 방법으로 useDeferredValue 훅도 시도했다.

const deferredFilter = useDeferredValue(filter);
const filteredData = useMemo(() => 
  data.filter(item => item.name.includes(deferredFilter)),
  [data, deferredFilter]
);

주의사항

• 아직 베타이므로 프로덕션 적용은 신중하게 판단해야 한다
• Suspense와 함께 사용하면 더 강력하지만, 서버 컴포넌트는 아직 실험 단계
• 기존 ReactDOM.render는 ReactDOM.createRoot로 마이그레이션 필요

정식 릴리스 전까지 더 테스트해볼 예정이다.