React 18의 새로운 기능과 Concurrent Rendering 완벽 가이드

React 18의 가장 큰 변화는 동시성(Concurrency) 지원입니다.

useTransition

비긴급 상태 업데이트를 표시하여 인터랙션 응답성을 유지합니다.

const [isPending, startTransition] = useTransition();

function handleSearch(query: string) {
  startTransition(() => {
    setResults(search(query));
  });
}

useDeferredValue

값의 업데이트를 지연시켜 무거운 렌더링을 뒤로 미룹니다.

const deferredQuery = useDeferredValue(query);
// deferredQuery는 query보다 늦게 업데이트됩니다.