useTransition은 느린 컴포넌트의 성능을 향상시키는 Hook으로 한번 렌더링 연산이 시작되면 멈출 수 없는 렌더링 블로킹 문제를 해결하기 위하여 사용됩니다. 또한 다음 화면으로 전환 작업을 하기 전에 컨텐츠가 로드 될 때까지 대기함으로써 컴포넌트가 바람직하지 않은 로딩 상태를 피할 수 있게 해주며, 더 중요한 업데이트를 컴포넌트가 즉시 렌더링 할 수 있도록 후속 렌더링까지 데이터 가져오기를 지연시킬 수 있습니다. useTransition Hook은 배열에서 startTransition 과 isPending 두 개의 값을 반환합니다.
추가적으로 useTransition을 설명하기에 앞서 긴급 업데이트와 전환 업데이트에 대해 알아보겠습니다. React 18 전까지는 아래의 코드와 같이 모든 업데이트가 긴급하게 렌더링되었습니다. 이렇게 모든 업데이트가 동시에 렌더링 되는 경우, 사용자와의 상호작용을 차단하게 되어 렌더링이 되는 동안 페이지는 지연 현상이 발생하여 응답하지 않는 것처럼 느껴질 수 있다는 단점이 있었습니다.
setInputValue(input);
// 긴급 업데이트 : 입력한 값
setSearchQuery(input);
// 긴급하지 않은 업데이트: 결과 값
하지만 최근 React 18에 추가된 useTransition을 통해 React에게 긴급한 업데이트와 그렇지 않은 업데이트를 알려줌으로써 사용자의 상호작용을 빠르게 유지할 수 있음과 동시에 불필요한 렌더링을 줄일 수 있는 효과도 얻을 수 있게 되었습니다.
예를 들어 사용자가 입력창에 검색어를 입력하면, API에서 데이터를 가져와 화면에 검색 결과 목록을 미리 보여주는 어플리케이션이 있다고 가정해보도록 하겠습니다. 사용자가 입력창에 검색어를 **입력(긴급 업데이트)**을 하고 있음에도 많은 양의 **검색결과(전환 업데이트)**가 렌더링이 되어버린다면 렌더링 블로킹 문제로 인해 입력창이 버벅거리는 현상이 나타나 사용자에게 매우 불만족스러운 경험이 될 것입니다.
import { startTransition } from 'react'
setInputValue(input)
// 긴급 업데이트 : 입력한 값
startTransition(() => {
setSearchQuery(input)
// 전환 업데이트: 결과 값