12.1. useDeferredValue란?

12.1.1. useDeferredValue 기본 설명

useDeferredValue는 React v18.0에 새로 나온 Hook으로, 리렌더링의 우선순위에 따라 의도적으로 렌더링을 지연할 수 있는 Hook입니다. useDeferredValue는 값의 업데이트 우선순위를 지정하여 우선순위가 높은 작업을 실행하는 동안 useMemo와 같이 기존의 값을 가지고 있으며 업데이트를 지연시킵니다.

이러한 기능은 이후 절에서 다룰 debounce, throttle과 비슷해 보이지만 useDeferredValue Hook을 이용하면 딜레이 시간을 고정하지 않고 더 긴급한 요청이 끝난 후 바로 지연된 렌더링을 실행한다는 이점이 있습니다.

const deferredValue = useDeferredValue(value);

useDeferredValue는 첫 번째 인자로 지연하길 원하는 값을 받고 해당 값의 복사본을 반환합니다.

12.1.2 useDeferredValue 사용법

브라우저에서 더 우선적으로 출력되어야 할 값을 계산하는 동안 useDeferredValue를 이용하여 DOM 트리에서 긴급하지 않은 부분의 리렌더링을 의도적으로 지연시킬 수 있습니다.

예를 들어 현재 실행되는 렌더링이 input에서와 같이 타이핑 즉시 화면에 반영되어야 하는 렌더링이라면 React에서는 이러한 긴급한 렌더링을 완료하기 전까지는 지연된 값을 기존의 값으로 출력하다가, 긴급한 렌더링이 끝나면 새로운 값을 출력하는 것입니다.

간단한 예제를 통해 useDeferredValue 사용법을 알아보겠습니다.

import React, { useState } from 'react';

export default function App() {
  let heavyArray = new Array(10000).fill(0);

  const [type, setType] = useState(0);

  const typeChange = (e) => {
    setType(e.target.value);
  };

  return (
    <div>
			<input type="text" onChange={typeChange} />
				{
				heavyArray.map(() => {
	        return <div>{type}</div>;
      })}
    </div>);
}

위 코드는 input에 텍스트를 입력하면 같은 내용이 10000번 출력되는 코드입니다. 간단한 코드지만 사용자가 입력한 모든 값에 대해 10000개의 결과를 리렌더링하면서 성능에 문제가 발생한 것을 확인할 수 있습니다.

이 때 useDeferredValue를 이용한다면 heavyArray의 출력을 지연시킬 수 있습니다.