useTransition() 훅의 역할이 뭔가요?

Question

`useTransition()` 훅의 역할과 언제 써야하는지 궁금합니다.

soaple · Accepted Answer

`useTransition()` 훅은 UI를 block시키지 않고 상태(state)를 업데이트할 수 있게 해주는 리액트 훅입니다.

`useTransition()` 훅을 사용하기 전에 먼저 리액트 버전18에서 소개된 Transitions라는 개념에 대해서 이해할 필요가 있습니다.

Transitions은 리액트에서 긴급한 업데이트와 긴급하지 않은 업데이트를 구분해서 처리하기 위한 새로운 개념입니다.
아래는 긴급한 업데이트와 긴급하지 않은 업데이트의 예시를 나타낸 것입니다.

- 긴급한 업데이트
    - 사용자와 직접적인 인터랙션이 일어나는 경우
    - 예) 글자 입력, 버튼 클릭 등
- 긴급하지 않은 업데이트
    - 사용자와 직접적인 인터랙션이 일어나지 않는 경우
    - 예) 서버로부터 결과를 받아와서 보여주는 경우

업데이트의 형태를 이렇게 나눈 이유는 사용자에게 더 빠르고 좋은 사용자 경험을 제공하기 위함이라고 보면 됩니다.

사용자가 웹사이트의 입력 양식에 키보드로 글자를 입력했는데, 글자가 느리게 입력되거나 몇초가 지나서 입력된다면 사용자는 웹사이트에 오류가 있다고 판단할 수 있습니다.

그래서 리액트 버전18에서는 이렇게 업데이트의 종류를 나누고 긴급한 업데이트를 먼저 처리함으로써 사용자에게 더 나은 경험을 제공하도록 한 것입니다.

이처럼 UI를 block시키지 않고 상태를 업데이트하는 것(긴급하지 않은 업데이트)을 Transitions라고 부르며, `useTransition()` 훅은 바로 이 Transition을 가능하게 해주는 훅입니다.

아래 코드는 `useTransition()` 훅을 사용해서 상태를 업데이트 하는 예시 코드입니다.

```ts
function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}
```

참고로 Transition 업데이트는 긴급하지 않은 것으로 처리되기 때문에 그 사이에 더 긴급한 업데이트가 들어오면 중단될 수 있습니다.

`useTransition()` 훅에 대한 더 자세한 내용은 아래 리액트 공식 문서를 참고하기 바랍니다 😀
https://react.dev/reference/react/useTransition