startTransition
주어진 Input을 통해 검색쿼리를 설정하고 결과물을 반환하는 컴포넌트가 있다고 가정하자
// Urgent: Show what was typed
setInputValue(input);
// Not urgent: Show the results
setSearchQuery(input);사용자는 Input을 작성하면 setInputValue가 즉시 업데이트되기를 바라지만, setSearchQuery는 좀 이후에 업데이트되어도 큰 불만을 갖지 않는다.
기존의 리액트는 모든 업데이트가 한번에 수행되는데 이는 모든 것이 리렌더될떄까지 interaction을 block할 수 있다.
이럴때 사용할 수 있는 것이 startTransition이다.
startTransition은 리액트로 하여금 즉시 수행되지 않아도 되는 것들을 'transition'으로 설정할수 있게 해준다.
import { startTransition } from 'react';
// Urgent: Show what was typed
setInputValue(input);
// Mark any state updates inside as transitions
startTransition(() => {
// Transition: Show the results
setSearchQuery(input);
});startTransition에 포함된 이벤트는 즉시 수행되지 않아도 되는 것으로 판단하여, 클릭, 타이핑 등의 더 우선순위가 높은 이벤트가 들어오면 중단된다. transtition이 타이핑 등의 행동으로 인해 지연된다면 오래된 렌더링을 버리고 새로운 렌더링만 한다.
Transition에서는 두가지 업데이트를 구분하는데,
Urgent Update: 클릭, 버튼 누르기 등 직접적 상호작용
Transition Update: UI를 업데이트함
Transition VS setTimeout
startTransition은 setTimeout과 달리 scheduled되는게 아님
즉시 실행되지만 transition 정보를 통해서 어떻게 업데이트를 렌더링할지를 결정함. timeout보다 더 빨리 렌더링 업데이트가 가능하단 뜻.
setTimeout은 단순히 업데이트를 지연시키기에 스피너 같은 Load 표시를 필요로 할때가 있는데, Transition에서는 useTransition을 통해 쉽게 구현 가능
import { useTransition } from 'react';
const [isPending, startTransition] = useTransition();
-------
{isPending && <Spinner />}
