React 18 - useTransition

개요

useTransition은 UI 변경을 가로막지 않고 상태를 업데이트할 수 있도록 도와주는 훅이다.

이를 활용해 상태 업데이트를 긴급하지 않은 것으로 간주해 무거운 렌더링 작업을 조금 미루고, 더 나은 UX를 제공할 수 있다.

useDeferredValue와 유사한 역할을 하며, 같은 유즈케이스에서 상태 업데이트 코드에 접근이 가능하다면 useTransition을, 값에만 접근 가능한 상태라면 useDeferredValue를 사용하면 된다.

훅 시그니처

const [isPending, startTransition] = useTransition()

useTransition 훅은 아무 인수도 받지 않으며, isPending과 startTransition 두가지 반환값을 배열형태로 제공한다.

• isPending : 현재 transition을 통한 상태 업데이트가 진행중인가에 대한 boolean 값
• startTransition : 긴급하지 않은 상태 업데이트로 간주할 상태 업데이트 함수를 넣어둘 수 있는 함수로, 경우에 따라 여러개의 setter를 넣을수도 있음

아래와 같은 주의점들이 있다.

• startTransition 내부에는 반드시 setState와 같은 상태 업데이트 함수와 관련된 작업만 넘길 수 있다. props나 사용자 정의 훅에서 반환하는 값을 사용하고 싶다면 대신 useDeferredValue 훅을 사용한다.
• startTransition으로 넘겨주는 상태 업데이트 함수는 다른 모든 동기 상태 업데이트로 인해 실행이 지연될 수 있다.
• startTransition으로 넘겨주는 함수는 반드시 동기함수여야한다. 비동기 함수를 넣을시 예상대로 동작하지 않을 수 있다.

사용예시

리액트 공식문서에서 제공하는 예시가 아주 적절하다.

위 예시에서 Posts 탭의 렌더링이 느린 상황이라transition으로 처리되지 않으면 해당 탭이 렌더링 되는동안 UI가 블로킹되어있어 상호작용이 불가능해지는데, transition으로 취급되어 UI가 블로킹되지 않고, 계속해서 상호작용이 가능하다.

여기에 isPending 값을 통해서 조건부로 로딩 스테이트를 표현하거나, 이에 따른 UI 변경을 통해 더 나은 UX를 제공할 수 있다.

Reference

• React.dev - useTransition