React v19: useTransition 훅과 <Activity />

Source: Dev.to

개요

useTransition 훅(React Docs)을 실험해 보던 중, UI 컴포넌트가 포커스를 잃을 때—예를 들어 사용자가 컴포넌트가 렌더링, 계산, 혹은 무거운 데이터를 가져오는 중에 다른 곳으로 이동하면—컴포넌트의 데이터가 유지되지 않는다는 것을 발견했습니다. 이는 기대되는 동작이지만, 때때로 데이터를 “실시간”으로 유지해서 사용자가 돌아올 때마다 다시 가져오거나 다시 계산하지 않도록 하고 싶을 때가 있습니다.

한 가지 해결책은 “ 컴포넌트로 내용을 감싸는 것입니다. 이 컴포넌트는 mode prop을 가지고 있으며 "visible" 또는 "hidden" 중 하나를 지정할 수 있습니다(React Docs). 기본 모드는 "visible"이며, 바로 우리가 필요로 하는 동작입니다.

핵심 단계

1. useTransition 사용

const [isPending, startTransition] = useTransition();

2. 지연을 이용해 무거운 fetch 시뮬레이션

const delay = async (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

3. 트랜지션 시작 및 데이터 fetch

startTransition(async () => {
  if (key === "profile") {
    await delay(1100);          // 시뮬레이션된 지연 시간
    await fetchData();          // 실제 fetch 로 교체
  }
});

4. 가져온 데이터를 “ 로 감싸기

<>
  <TabPanel value="home">
    Tab content for Home
    {data}
  </TabPanel>

  <TabPanel value="contact">
    Tab content for Contact
  </TabPanel>
</>

{isPending ? "Fetching data..." : ""}

결과

사용자가 다른 탭으로 이동했다가 Profile 탭으로 다시 돌아와도 가져온 데이터가 계속 표시됩니다. “ 래퍼가 포커스가 없는 동안에도 렌더링된 출력을 보존합니다.

전체 소스 코드는 저장소에서 확인할 수 있습니다: .

격차 및 권고 사항

• 관찰: 사용자가 Profile 탭으로 돌아오면 데이터는 여전히 표시되지만 isPending이 다시 발생합니다. 이는 startTransition(따라서 handleTabChange)이 한 번 더 실행된다는 것을 의미합니다.
• 질문: useTransition과 “이 협력하여 탭 재진입 시 트랜지션이 다시 트리거되지 않게 할 방법이 있을까요? 아니면 이것이 React DOM 처리의 기본 동작인가요?
• 잠재적 개선: 향후 업데이트에서는 이 격차를 해소할 수 있습니다. 예를 들어 트랜지션 상태를 캐시하거나, 데이터가 이미 존재할 때 중복 트랜지션을 건너뛰는 메커니즘을 제공하는 방식이 있을 수 있습니다.