[React Docs Beta] 1-5. startTransition

React Docs (beta) 번역 및 정리

Built-in React APIs

1. createContext
2. forwardRef
3. lazy
4. memo
5. startTransition

📍startTransition

✅UI를 non-blocking하며 상태를 업데이트할 수 있게 해준다

startTransition(scope)

 

📍startTransition(scope)

✅startTransition 함수는 상태 업데이트를 transition(전환) 으로 표시할 수 있다

import { startTransition } from 'react';

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

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

 

✅매개변수

scope (함수)

- 1개 이상의 set 함수를 호출하여 상태를 업데이트하는 함수

- scope 함수는 매개변수 없이 호출되며, 동기적인 상태 업데이트들 (내부의 set 함수들) 을 transition으로 표시

- 이러한 동기적 상태 업데이트들은 non-blocking이며 원치않는 loading indicator를 표시하지 않음

 

✅반환값

- 아무것도 반환하지 않음

 

✅주의사항

- startTransition api는 transition 진행 상태를 추적하지는 않기 때문에, 이를 추적하는 pending indicator를 사용하려면 useTransition 훅을 사용해야 한다

 

- scope 내부에는 set 함수들만 올 수 있다

- 만약, props나 커스텀 훅의 결과를 transition에 연결하려고 한다면, useDeferredValue 훅을 대신 사용해야 한다

 

- transition은 즉시 처리되기 때문에 scope 함수는 동기적이어야 한다 (timeout 등 사용 불가)

 

- transition으로 표시되는 상태 업데이트는 다른 상태 업데이트에 의해 중단될 수 있다

- 예를 들면, transition 내에서 chart 컴포넌트를 업데이트 하는데, chart 컴포넌트의 로컬 상태가 변경되면, 로컬 상태를 먼저 변경한 후 transition을 처리한다

 

- transition 업데이트는 텍스트 입력을 제어하는데 사용할 수 없다

 

- 진행중인 transition이 여러 개 있는 경우, 전환들은 일괄 처리된다 (batch) -> 향후 버전에서 제거될 수 있다

 

📍이외

✅Transition은 느린 디바이스에서도 UI 업데이트를 빠르게 유지한다

 

⭐유저가 탭 1을 클릭 -> 렌더링 완료 전에 탭 2를 클릭 -> 탭 1 렌더링을 기다리지 않고 탭 2 렌더링 수행

- 이처럼 Transition은 UI를 리렌더링 중에도 빠르게 업데이트한다

- non-blocking

 

✅startTransition은 useTransition hook과 매우 유사하다

- 단, startTransition 은 transition이 진행중인지 여부를 추적하는 isPending 플래그를 제공하지 않는다

- useTransition hook을 사용할 수 없을 때 startTransition 을 사용한다

- 예를 들면, 컴포넌트 밖이나 데이터 라이브러리 등