startTransition을 사용하면 UI를 blocking하지 않고 state를 업데이트할 수 있음.

startTransition(scope)

---

Reference

startTransition(scope)

startTransition 함수를 사용하면 state 업데이트를 transition으로 표시할 수 있음.

import { startTransition } from 'react';

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

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

Parameters

• scope: 하나 이상의 set 함수를 호출하여 일부 state를 업데이트하는 함수. React는 매개변수 없이 즉시 scope를 호출하고 scope 함수를 호출하는 동안 동기적으로 예약된 모든 state 업데이트를 transition으로 표시함. 이러한 transitoin은 non-blocking하며 원치 않는 loading indicator를 표시하지 않음.

Returns

아무것도 반환하지 않음.

Caveats

• startTransition은 transition이 보류 중인지 여부를 추적하는 방법을 제공하지 않음. Transiton이 진행되는 동안 보류 중인지 여부를 표시하려면 대신 useTransition이 필요함.

• State의 set 함수에 액세스할 수 있는 경우에만 업데이트를 transition으로 감쌀 수 있음. 일부 prop이나 사용자 정의 Hook 반환 값에 대한 응답으로 transition을 시작하려면 대신 useDeferredValue를 사용할 것.

• startTransition에 전달하는 함수는 동기적이어야 함. React는 이 함수를 즉시 실행하여 실행되는 동안 발생하는 모든 state 업데이트를 transition으로 표시함. 나중에 더 많은 state 업데이트를 수행하려고 하면(예: timeout 안에서), transition으로 표시되지 않음.

• Trnasition으로 표시된 state 업데이트는 다른 state 업데이트에 의해 중단됨. 예를 들어, transition 내에서 Chart 컴포넌트를 업데이트한 다음 Chart가 다시 렌더링되는 도중에 입력을 시작하면 React는 입력 state 업데이트를 처리한 후 Chart 컴포넌트에 대한 렌더링 작업을 다시 시작함.

• Transition 업데이트는 텍스트 입력을 제어하는 데 사용할 수 없음.

• 진행 중인 transition이 여러 개 있는 경우, React는 transition을 일괄 처리함. 이는 향후 릴리즈에서 제거될 가능성이 높은 제한 사항임.

---

Usage

Marking a state update as a non-blocking transition

State 업데이트를 startTransition 호출로 감싸면 transiton으로 표시할 수 있음:

import { startTransition } from 'react';

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

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

Transition을 사용하면 느린 기기에서도 사용자 인터페이스 업데이트의 반응성을 유지할 수 있음.

Transition을 사용하면 다시 렌더링하는 동안에도 UI의 반응성이 유지됨. 예를 들어, 사용자가 탭을 클릭했다가 마음이 바뀌어 다른 탭을 클릭하고 싶은 경우, 첫 번째 리렌더링이 완료될 때까지 기다릴 필요 없이 다른 탭을 클릭할 수 있음.

Note

startTransition은 useTransition과 매우 유사하지만, transition이 진행 중인지 여부를 추적하기 위한 isPending 플래그를 제공하지 않는다는 점이 다름. useTransition을 사용할 수 없을 때 startTransition을 호출할 수 있음. 예를 들어, startTransition은 데이터 라이브러리와 같은 컴포넌트 외부에서 작동함.