startTransition

startTransition

startTransition(scope)은 긴급하지 않은 업데이트를 래핑하여 긴급한 이벤트를 먼저 처리하도록 한다. startTransition으로 래핑된 이벤트들은 UI를 Blocking 하지 않고, 상태를 업데이트하기 때문에 업데이트하는 과정에서도 사용자가 UI와 상호작용이 가능하다.

주로 상태 업데이트, API 통신 등 네트워크 환경에 의해 영향을 받거나, 업데이트되는 중에도 사용자가 UI와 상호작용해야 할 때 사용한다.

import { startTransition } from 'react';

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

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

• scope : 긴급하지 않은 상태 업데이트를 래핑하는 부분이다. scope에 작성된 코드는 실행되는 동안 UI를 Blocking 하지 않는다.

 

긴급 업데이트와 전환 업데이트

긴급 업데이트 : input과 같이 사용자가 입력하는 글자 렌더링은 업데이트가 느리다면 오류라고 생각할 수 있다. 그러므로 입력과 동시에 업데이트되어야 한다.

전환 업데이트 : 페이지 이동, 버튼 클릭 후 API 통신 등의 페이지가 전환되는 이벤트들은 사용자가 천천히 업데이트될 것이라고 예상한다. 전환 업데이트에 작성된 작업들은 긴급 업데이트보다 낮은 우선순위를 가지며 사용자에 의해 인터럽트될 수 있다.

 

📌 startTransition을 사용해야 하는 이유

• 느린 네트워크 환경에서도 사용자 인터페이스의 반응성을 유지할 수 있다.
• UX를 향상시킬 수 있다.
  • 상태가 업데이트되면서 UI가 Blocking 되는 것을 막을 수 있기 때문에 사용자는 깜빡거리는 화면을 보는 것을 방지할 수 있다.
• startTransition으로 래핑된 업데이트들은 인터럽트가 가능하다.
  • 래핑된 상태 업데이트가 실행 중이어도 새로운 상태 변경 이벤트들이 들어오면 모두 인터럽트되고 가장 최근의 상태 업데이트만 실행된다.

 

❗ 사용해보기

export default function Detail({ detail, state, setCategory }: TDetailProps): JSX.Element {
    const handleIndexClick = (value: number) => {
        startTransition(() => {
            navigate(`/help-request/${state.helpRequests[index + value].helpRequestIdx}`, {
                state: { helpRequests: state.helpRequests },
                replace: true
            });
            setCategory('나의 질문');
        });
    };

    return (
        ...
    );
}

리스트 디테일 페이지에서 startTransition을 적용하였다. 페이지 안에서 탭을 통해 다른 상세 페이지로 이동이 가능했는데, 그때마다 데이터를 새로 받아오고, 화면에 그려오는 과정에서 화면이 깜빡거리는 불편함이 있었다. 사용자 경험이 떨어지는 것 같아 startTransition을 통해 상태가 업데이트 되는 중에도 UI가 Blocking 되지 않도록 하였다.

 

startTransition과 useTransition

💡startTransition은 useTransition과 유사하지만, transition이 진행 중인지 추적하는 isPending 플래그는 제공하지 않는다. 만약 진행 중인지를 확인해야 한다면 useTransition을 사용하고, useTransition을 사용할 수 없는 경우에는 startTransition을 사용한다.