useDeferredValue란?

  useDeferredValue란 상태 값의 우선순위를 낮추기 위한 훅이다. 우선순위가 높은 작업을 실행하는 동안 useMemo와 유사하게 이전 값을 계속 들고 있으면서 업데이트를 지연시킵니다.

 useMemo와 함께 사용하면 종속된 값들을 memoize 시키면 불필요한 재 랜더링을 막으면서 하위 컴포넌트나 상태의 업데이트를 지연시킬 수 있습니다.

Parameters

 value: 지연시키고 싶은 값입니다. 모든 타입을 가질 수 있습니다.

Returns

 초기 렌더링 동안, 반환된 지연 값은 제공한 값과 동일합니다. 업데이트 중에는, React는 먼저 이전 값을 가지고 재렌더링을 시도하고(따라서 이전 값을 반환합니다), 그 다음으로 새로운 값으로 백그라운드에서 다른 재렌더링을 시도합니다(따라서 업데이트된 값을 반환합니다).

주의사항

• useDeferredValue에 전달하는 값들은 원시타입이거나 렌더링 외부에서 생성된 객체여야 합니다. 만약 렌더링 중에 새로운 객체를 생성하고 바로 useDeferredValue에 전달한다면, 매번 렌더링할 때 마다 다르게 되어, 필요 없는 백그라운드 재렌더링을 일으킵니다.

  
  

• useDeferredValue가 다른 값을 받으면, 현재의 렌더링 외에도(아직 이전 값을 사용하는 경우), 새로운 값으로 백그라운드에서 재렌더링을 스케줄 합니다.

  
  

• 백그라운드 재렌더는 중단 가능합니다: 만약 다른 업데이트가 발생하면 React는 백그라운드 재렌더를 처음부터 다시 시작합니다. 예를 들어 사용자가 입력하는 속도가 지연된 값을 받아서 그래프를 재렌더 하는 것보다 빠르다면, 사용자가 타이핑을 멈춘 후에만 그래프가 재랜러됩니다.

  
  

• useDeferredValue는 와 통합되어 있습니다. 만약 새로운 값으로 인해 발생한 배경 업데이트가 UI를 일시정지(suspends)하면 사용자는 대체 화면(fallback)을 보지 못하게 됩니다. 데이터 로딩이 완료될 때까지 기존의 지연된 값을 보게 됩니다.

  
  

• useDeferredValue 자체적으로 추가적인 네트웍 요청을 방지하지 않습니다.

  
  

• useDeferredValue 자체에 의한 고정 지연은 없습니다. React가 원래의 재렌더링을 완료하자마자, React는 새로운 지연된 값으로 백그라운드 재렌더링을 즉시 시작합니다. 이벤트(예: 타이핑)에 의해 발생한 모든 업데이트는 백그라운드 재렌더링을 중단하고 그것보다 우선 순위를 가집니다.

  
  

• useDeferredValue에 의해 발생한 배경 재렌더는 화면에 커밋될 때까지 효과(Effects)를 발생시키지 않습니다. 만약 배경 재렌더가 일시 정지(suspends)된다면, 그 효과들은 데이터 로딩이 완료되고 UI 업데이트 이후에 실행됩니다.

  
  

  예시 코드 :

import { useDeferredValue, useState } from "react";

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

// count2의 값을 가장 낮은 우선순위로 상태를 변경하고 싶을 경우
  const deferredValue = useDeferredValue(count2);

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

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

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

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