useTransition이란 ?

개념 : useTransition은 UI를 차단하지 않고 상태를 업데이트 할 수 있는 리액트 훅이다.

const[isPending, startTransition] = useTransition();

useTransition은 두개의 항목이 있는 배열을 반환한다.
1. isPending 플래그는 대기중인 transition이 있는지 알려준다.
2. startTransition 함수는 상태 업데이트(setState)를 transition으로 표시해주는 함수이다.

const TabButton = ({ children, onClick }) => {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  if (isPending) {
    return <b className="pending">{children}</b>;
  }
  function selectTab(nextTab) {
    startTransition(() => {
      // NOTE: async 함수는 들어오면 안된다.
      // 성능저하를 일으키는 state 변경함수 감싸기
      setTab(nextTab);
    });
  }
  // ...아래에서 풀 코드로 설명
};

useTransition 왜 사용할까?

모두 빠르게 반응하면 최고지만, 모든 상태가 렌더링이 동기적으로 일어나면 성능이 좋지 않은 상황에서는 모든 상태가 늦게 반응하게된다.
👋 useTransition을 통해서 우선순위를 주면된다!!!

성능이 좋지 않게되면 빠른 업데이트가 일어나지 안아서 불편함을 느낄 수 있다. -> 지연된 결과

setFilterTerm() 상태 업데이트 함수가 startTransition()에 의해서 래핑되면 React는 이 상태 업데이트 코드를 낮은 우선순위로 간주하게된다.

🧐 useTransition()을 사용하지 않으면 특히 느린 장치에서 앱이 응답하지 않을 수 있는데 이유는 동기적으로 모두 렌더링 한 이후에 반응하기 때문이다.

이러한 이유로 인해서 Input은 사용자 입장에서 빠르게 변경되어야하나, Input에 대한 결과 값을 조금 늦게 보여주는 방법을 선택하는 것이다.

isPending

우선순위가 낮은 일부 상태 업데이트가 지연(실행 보류 중)되고 있음을 알리는 boolean타입이다.

startTransition

• 낮은 우선순위로 처리해야 하는 경우 상태 업데이트를 startTransition으로 래핑할 수 있다.
• 상태 변화를 일으키는 콜백함수를 전달받고 해당 콜백함수는 낮은 우선순위로 실행되게 된다.

startTransition 유의사항

1. 동기 함수여야한다.
2. transition으로 표시된 setState는 다른 setState업데이트시 중단된다.

• 다른 상태 업데이트가 있을 경우 그것을 먼저처리한다는 뜻

3. 텍스트 입력을 제어하는 데 사용할 수 없다.

결론

모두 빠르게 반응하면 최고지만, 모든 상태가 렌더링이 동기적으로 일어나면 성능이 좋지 않은 상황에서는 모든 상태가 늦게 반응하게된다.

때문에 useTransition()을 통해서 우선순위를 정해줄 수 있다.

Reference & Additional Resources

• https://itchallenger.tistory.com/654
• useTransition() & useDeferredValue 강의