[React Hook] useTransition

❓Transition
UI에서 중요도가 낮은 작업을 백그라운드에서 처리하는 것

📌useTransition?

React 18에서 도입된 훅으로 UI 업데이트를 트랜지션으로 처리하여 사용자 경험을 개선하는 데 사용된다. 비동기 작업이나 시간이 오래 걸리는 상태 업데이트를 처리할 때 유용하다.

📌useTransition 사용 방법

const [isPending, startTransition] = useTransition();

useTransiton을 사용해 상태 업데이트를 낮은 우선 순위로 처리할 수 있다.

useTransition은 매개변수를 받지 않는다.

useTransition 훅은 isPending과 startTransition을 반환한다.

• isPending : 트랜지션 진행 중 여부 (boolean)
• startTransition : 우선 순위가 낮은 상태 업데이트를 시작하는 함수

startTransition

startTransition(() => { /** state Setter Fn **/})

startTransition 내부 작업은 우선순위가 낮은 작업으로 처리된다.

즉, 내부 상태 업데이트를 트랜지션으로 처리하여 다른 UI 작업 처리 이후에 업데이트 된다.

 

또, startTransition에 전달되는 함수는 동기식이어야 한다.

 

❌ 잘못된 예 ❌

startTransition(() => {
  // ❌ startTransition 호출 *후에* state 설정
  setTimeout(() => {
    setPage('/about');
  }, 1000);
});

startTransition(async () => {
  await someAsyncFunction();
  // ❌ startTransition 호출 *후에* state 설정
  setPage('/about');
});

 

✅ 옳은 예 ✅

setTimeout(() => {
  startTransition(() => {
    // ✅ startTransition 호출 *도중* state 설정
    setPage('/about');
  });
}, 1000);

await someAsyncFunction();
startTransition(() => {
  // ✅ startTransition 호출 *도중* state 설정
  setPage('/about');
});

isPending

import React, { useState, useTransition } from 'react';

function App() {
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);

  const handleClick = () => {
    startTransition(() => {
      setCount(prev => prev + 1);
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Click!👆</button>
      {isPending ? <p>Loading...</p> : <p>Count: {count}</p>}
    </div>
  );
}

트랜지션이 진행중일 때 true로 설정되어 로딩 상태를 표시할 수 있다.

⚠️Transition에서 입력을 업데이트 하는 setter 함수를 사용할 수 없다.

📌useTransition 사용 이유

Transition을 사용하면 상태 업데이트가 UI 처리보다 후순위로 처리되기 때문에 느린 디바이스에서도 UI 반응성을 유지할 수 있다.

Transition을 사용하면 리렌더링 도중에도 UI가 반응성을 유지한다.

또, Suspense에 의해 의도치않은 Fallback이 발생하는 것을 방지할 수 있다.

 

---

 

* 참고 문서 : useTransition - React 

useTransition – React