useDeferredValue,useTransition

React 18에서 concurrent rendering을 위해 새로 나온 useDeferredValue와 useTransition이 무엇인지 알아보자.

</aside>

0. 해당 hooks가 나오게 된 배경

서비스에서 무거운 계산을 하는 로직이 실행되면 메인 스레드가 거기서 블록되기 때문에 다음 작업을 처리하지 못하게 된다. 극단적으로 매우 무거운 작업을 하게 될 때 다음 입력을 받지 못할 정도로 프레임이 저하되는 현상이 발생한다.

이럴 경우 유저와 상호작용이 불가능해지는 상태가 발생하고, 유저에게 좋은 경험을 제공하지 못하게 된다.

이 문제를 근본적으로 해결하기 위해서 React 팀에서는 사용자의 상호작용이 있으면 무거운 작업은 메인 스레드가 놀고 있을 때 처리하고, 유저 입력이 들어오면 다시 유저와의 상호작용에 집중하는 것이다. 즉 상태 변화의 우선순위를 나누고, 우선순위가 높은 이벤트가 발생하면 그 작업을 먼저 핸들링하고, 이후에 우선순위가 낮은 상태를 핸들링하게 된다.

1. useDeferredValue

먼저 useDeferredValue는 상태 값 변화에 낮은 우선순위를 지정하기 위한 훅이다.

아래 코드에서 count2의 값을 가장 낮은 우선순위로 상태를 변경하고 싶을 경우에는 useDeferredValue로 count2를 래핑하면 된다.

import { useDeferredValue, useState } from "react";

export default function Home() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const [count3, setCount3] = useState(0);
  const [count4, setCount4] = useState(0);

  const deferredValue = useDeferredValue(count2);

  const onIncrease = () => {
    setCount1(count1 + 1);
    setCount2(count2 + 1);
    setCount3(count3 + 1);
    setCount4(count4 + 1);
  };

  console.log({ count1 });
  console.log({ count2 });
  console.log({ count3 });
  console.log({ count4 });
  console.log({ deferredValue });

  return <button onClick={onIncrease}>클릭</button>;
}

console.log

{count1 : 1}
{count2 : 1}
{count3 : 1}
{count4 : 1}
{deferredValue : 0}
{count1 : 1}
{count2 : 1}
{count3 : 1}
{count4 : 1}
{deferredValue : 0}
{count1 : 1}
{count2 : 1}
{count3 : 1}
{count4 : 1}
{deferredValue : 1}
{count1 : 1}
{count2 : 1}
{count3 : 1}
{count4 : 1}
{deferredValue : 1}

onIncrease 함수를 실행하게 되면 count2의 값은 바뀌게 되었는데 deferredValue의 값은 다른 상태변화가 다 발생하고 가장 나중에 변경되게 된다.