useTransition의 등장배경

렌더링 과정에서의 Blocking rendering 문제를 해결하기 위해 React18 버전에서 새로운 훅이 등장했다. Blocking rendering이란 한번 렌더링연산이 시작되면 멈출 수 없는 문제이며 처리할 것이 많은 화면을 업데이트할 경우 렌더링 되는 동안 페이지가 지연되는 현상이 발생하는 것이며 이를 해결하기 위해 useTransition이 등장하게 된 것이다.

useTransition 예제

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

function App() {
  const printA = new Array(1000).fill("A");
  const [str, setStr] = useState("");
  const [isPending, startTransition] = useTransition();

  const onChangeInput = (e) => {
    setStr(e.target.value);
  };

  return (
    <div>
      <input onChange={onChangeInput} />
      {isPending && <h2>Pending</h2>}
      {printA.map(() => {
        return <div>{str}</div>;
      })}
    </div>
  );
}

export default App;

위의 코드는 input창을 통해 state를 입력받고 업데이트 하며 해당 state를 1000번 출력하도록 하고 있다. 이러한 경우 입력을 받을 때마다 state가 업데이트되어 1000개의 div가 리렌더링 되기 때문에 큰 성능저하가 발생하게 된다.

const onChangeInput = (e) => {
    startTransition(() => setStr(e.target.value));
  };

이 때, startTransition을 사용하여 input 창의 우선순위를 높여 입력이 끊기는 상황을 줄여줄 수 있다. isPending은 사용해도 되고 하지 않아도 괜찮다. 만약 렌더링에 끊김이 있다면 h2 태그의 Pending이 출력될 것이다.

startTransition vs Debounce vs Throttle

디바운스의 경우 입력이 다 끝나면 일정 시간 뒤에 화면을 업데이트하는 방식이다. 즉 유저가 계속해서 입력을 하는 경우라면 화면 업데이트는 계속해서 지연될 것이다. 단순히 작업을 뒤로 미루는 것 뿐인 것이다.

쓰로틀의 경우에는 일정 시간을 주기로 화면을 렌더링하도록 할 수 있을 것이다. 하지만 그 일정시간 내에 연속적으로 입력하는 것이 아닌 중간에 입력을 하지 않는 경우 무의미하게 기다리는 시간이 생길 것이다.

그러나 startTransition의 경우에는 화면을 업데이트 하는 중에도 사용자의 입력을 계속 받을 수 있다. 디바운스나 쓰로틀과 비교한다면 중간에 비어있던 시간들이 사라지기 때문에 UX가 더 좋아진다.

startTransition의 작동방식

React18 버전에서는 렌더링을 하는 중에도 중간에 우선순위가 더 높은 작업이 생긴다면 먼저 처리할 수 있게 해준다. 즉 렌더링 작업을 멈출수 있고 그 멈춘 순간에 우선순위가 높은 작업을 실행하는 것이다.