useTransition

• 비동기 작업과 상태 업데이트의 우선순위를 관리할 수 있다.
• 긴급하지 않은 상태 업데이트를 표시하고, 처리할 수 있게 해준다.

const [isPending, startTransition] = useTransition();

• isPending
  • 전환이 진행중인지?
• startTransition
  • 우선순위가 낮은 업데이트를 래핑하는 함수

예시

function App() {
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);

  function handleClick() {
    startTransition(() => {
      setCount(c => c + 1);
    });
  }

  return (
    <div>
      {isPending && <Spinner />}
      <button onClick={handleClick}>{count}</button>
    </div>
  );
}

• startTransition으로 래핑된 상태 업데이트는 낮은 우선순위로 처리된다.
• 리액트는 더 긴급한 업데이트가 있을 경우, 요 업데이트를 중단하고, 나중에 재개한다.
• useTransition은 상태업데이트만 지연시키고, 네트워크 요청 자체를 지연시키는건 아니다.

주의 사항

• startTransition에 전달하는 함수는 동기식이어야한다.
  • 리액트는 이 함수를 즉시 실행하여, 실행하는 동안 발생하는 모든 state 업데이트를 Transition으로 표시한다.
  • 나중에 더 많은 state 업데이트를 수행하려고하면 (ex. timeout), Transition으로 표시되지 않는다.
• Transition으로 표시된 state 업데이트는, 다른 state 업데이트에 의해 중단된다.
• 진행중인 Transition이 여러개 있는 경우, 리액트는 현재 Transition을 함께 일괄처리한다.