startTransition

startTransition(action)

• 레퍼런스
  • startTransition(action)
• 사용법
  • state 업데이트를 non-blocking Transition 으로 표시

레퍼런스

startTransition(action)

startTransition 함수는 상태 업데이트를 Transition 으로 표시할 수 있게 해줍니다.

import { startTransition } from 'react';

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

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

See more examples below.

매개변수

• scope: 하나 이상의 set 함수를 호출하여 일부 state를 업데이트하는 함수입니다. React는 매개변수 없이 scope를 즉시 호출하고 scope 함수를 호출하는 동안 동기적으로 예약된 모든 state 업데이트를 Transition 으로 표시합니다. 이는 non-blocking이며 원치 않는 로딩을 표시하지 않습니다.

• action: A function that updates some state by calling one or more set functions. React calls action immediately with no parameters and marks all state updates scheduled synchronously during the action function call as Transitions. Any async calls awaited in the action will be included in the transition, but currently require wrapping any set functions after the await in an additional startTransition (see Troubleshooting). State updates marked as Transitions will be non-blocking and will not display unwanted loading indicators..

반환값

startTransition은 아무것도 반환하지 않습니다.

주의 사항

• startTransition은 Transition 이 진행 중인지 추적할 수 있는 방법을 제공하지 않습니다. 진행 중인 Transition 을 표시하려면 useTransition이 필요합니다.

• 해당 state의 set 함수에 접근할 수 있는 경우에만 업데이트를 Transition 으로 래핑할 수 있습니다. 일부 props 이나 custom Hook 반환 값에 대한 응답으로 Transition 을 시작하려면 useDeferredValue를 대신 사용하세요.

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

• The function you pass to startTransition is called immediately, marking all state updates that happen while it executes as Transitions. If you try to perform state updates in a setTimeout, for example, they won’t be marked as Transitions.

• You must wrap any state updates after any async requests in another startTransition to mark them as Transitions. This is a known limitation that we will fix in the future (see Troubleshooting).

• Transition 으로 표시된 state 업데이트는 다른 state 업데이트에 의해 중단됩니다. 예를 들어, Transition 내에서 차트 컴포넌트를 업데이트하지만 차트가 다시 렌더링되는 동안 입력을 시작하면 React는 입력 state 업데이트를 처리한 후 차트 컴포넌트에서 렌더링 작업을 다시 시작합니다.

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

• 만약 진행 중인 Transition 이 여러 개 있는 경우, React에서는 함께 일괄 처리 합니다. 이는 향후 릴리즈에서 제거될 가능성이 높은 제한 사항입니다.

• If there are multiple ongoing Transitions, React currently batches them together. This is a limitation that may be removed in a future release.

사용법

state 업데이트를 non-blocking Transition 으로 표시

startTransition으로 래핑함으로써 state 업데이트를 Transition으로 표시할 수 있습니다.

import { startTransition } from 'react';

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

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

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

Transition을 사용하면 UI가 리렌더링 도중에도 반응성을 유지합니다. 예를 들어 사용자가 탭을 클릭 했다가 마음이 바뀌어 다른 탭을 클릭하면 첫 번째 리렌더링이 완료될 때 까지 기다릴 필요 없이 다른 탭을 클릭할 수 있습니다.