useTransition 이란?

useTransition이란 react 18에서 추가로 도입된 훅이다. 이는 한번 렌더링이 시작되면 멈출 수 없어 사이즈가 큰 화면의 렌더링이 진행되는 경우 페이지 지연이 발생하는 블로킹 렌더링 문제를 해결하기 위해 도입되었다.

 useDefferedValue 와 달리 상태 값이 아닌 함수의 실행 우선순위를 늦출 수 있다.

Parameters

useTransition은 파라미터를 갖지 않는다.

Returns

useTransition은 정확히 두 개의 항목을 가진 배열을 반환합니다:

1. isPending : transition이 있는지를 boolean으로 나타내는 플래그입니다.

2. startTransition : 상태 업데이트를 transition으로 표시할 수 있는 함수입니다.

아래는 공식 문서에서 제공하는 예시 코드입니다.

import { useTransition } from 'react';

function TabContainer() {
// 최상단에 선언하여 사용
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
  // 트랜지션을 걸어 실행 순위가 밀리게 된다 
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

기존의 문제 해결방법들과의 차이점

1. Debouncing

  디바운싱(Debouncing) 디바운싱은 연속된 이벤트를 그룹화하여 단일한 이벤트만 처리하도록 하는 방법이다

 예를 들면 사용자의 입력이 모두 끝나면 일정 시간 뒤에 화면 업데이트를 진행하는 방법이다. 이러한 디바운싱은 사용자의 입력이 지속된다면 화면 업데이트가 계속해서 지연될 수 있다는 부작용이 있다.

2. Throttling

  쓰로틀링(Throttling) 쓰로틀링은 주어진 시간 동안 함수 호출의 최대 횟수를 제한하는 방법이다. 예를 들면 위 그림과 같이 3초 주기로 화면을 그려주도록 하는 것이다. 하지만 만약 3초동안 사용자의 입력이 계속된다면 이상적인 방법이 되겠지만 위 그림과 같이 입력이 불규칙적으로 , 불연속적으로 발생한다면 이는 의미 없는 시간이 발생하게 된다.

3. startTransition

  디바운싱, 쓰로틀링과 비교하면 시간을 효율적으로 사용하고 더욱 좋은 사용자 경험을 제공할 수 있다.

4. startTransition의 원리

  과거에는 한번 렌더링이 실행되면 이를 컨트롤 할 수 없었지만 react18에서는 렌더링을 하는 중에도 우선순위에 따라 화면의 렌더링에 관여할 수 있게 되었다.