React 18 Alpha의 Concurrent Rendering 테스트해보기

배경

지난주 React 18 Alpha가 발표되면서 Concurrent Rendering이 공식적으로 소개됐다. 마침 운영 중인 대시보드에서 대용량 테이블 렌더링 시 버벅임이 심해 사용자 불만이 있던 상황이라 테스트 환경에 적용해봤다.

문제 상황

검색어 입력 시마다 5000개 이상의 로우를 필터링하며 렌더링하는데, 타이핑이 버벅이고 UI가 멈추는 현상이 발생했다. 기존에는 debounce로 처리했지만 여전히 체감 지연이 있었다.

startTransition 적용

import { startTransition, useState } from 'react';

function DataTable() {
  const [searchTerm, setSearchTerm] = useState('');
  const [deferredTerm, setDeferredTerm] = useState('');

  const handleChange = (e) => {
    setSearchTerm(e.target.value);
    startTransition(() => {
      setDeferredTerm(e.target.value);
    });
  };

  const filteredData = data.filter(item => 
    item.name.includes(deferredTerm)
  );

  return (
    <>
      <input value={searchTerm} onChange={handleChange} />
      <Table data={filteredData} />
    </>
  );
}

input의 즉각 반응을 위한 상태와 무거운 렌더링을 위한 상태를 분리했다. startTransition으로 감싼 업데이트는 우선순위가 낮아져 타이핑이 끊기지 않았다.

결과

체감상 입력 반응성이 확연히 개선됐다. 테이블 업데이트는 약간 지연되지만 사용자 입력이 막히지 않아 UX가 훨씬 자연스러워졌다. 프로덕션 적용은 안정화를 지켜본 후 결정할 예정이다.

참고사항

• React 18은 아직 Alpha 단계이므로 실험 목적으로만 사용
• createRoot API로 마운트 방식 변경 필요
• Suspense for Data Fetching도 함께 개선됐으나 아직 실험적 단계