[React Docs] 2-1. useTransition (1)

리액트 공식 문서(react.dev) 읽기

Built-in React Hooks
1. useTransition

 

📍useTransition

✅UI blocking 없이 state를 변경할 수 있는 hook

const [isPending, startTransition] = useTransition()

 

📍useTransition()

✅컴포넌트 최상단에서 useTransition() 을 호출하여 일부 상태 업데이트 (set 함수)를 transition으로 표시

import { useTransition } from 'react';

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  // ...
}

 

✅매개변수

- 없음

 

✅반환값

2개의 원소를 가진 배열을 반환

 

1. isPending (flag)

- pending transition이 있는지 알려줌

 

2. startTransition (함수)

- transition으로 표시할 상태 업데이트들을 콜백함수로 묶어 함수 내부에 담는다

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

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

 

✅이전글 참고

https://ggarden.tistory.com/419

[React Docs Beta] 1-5. startTransition

 

✅주의사항

- useTransition은 hook이므로 컴포넌트 혹은 커스텀 훅 내부에서만 사용 가능

컴포넌트 외부에서 사용해야 한다면 startTransition 함수를 사용하면 된다

 

📍상태 업데이트를 non-blocking 한 Transition으로 만들기 예제

https://react.dev/reference/react/useTransition#usage

useTransition

 

렌더링 오래 걸리는 컴포넌트를 렌더링하다가 렌더링 완료 전에 바로 다른 컴포넌트를 렌더링하려고 하면

지연시간 없이 바로 다른 컴포넌트 렌더링 가능

 

만약, Transition을 안썼다면, 렌더링이 오래걸리는 컴포넌트의 렌더링이 끝나고 나서야 다른 컴포넌트 렌더링 가능

 

✅즉, Transition은 렌더링을 non-blocking하게 처리 가능!

✅렌더링이 오래 걸리는 컴포넌트가 있을 경우, 이를 기다리지 않고 다른 탭으로 바로 이동할 때 유용하다

✅ispending 을 활용해 pending visual 만들 수 있음