useDeferredValue

• 값의 지연된 버전을 생성한다.
• 중요하지 않은 업데이트를 지연시켜, 더 중요한 업데이트가 먼저 처리되도록 한다.

const deferredValue = useDeferredValue(value);

예시

function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);
  
  // deferredQuery를 사용하여 결과 렌더링
  return <ExpensiveSearchResults query={deferredQuery} />;
}

//혹은...
function App() {
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text);

  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <ExpensiveList text={deferredText} />
    </>
  );
}

• 리액트는 더 긴급한 업데이트가 없을 때, 해당 값을 업데이트한다.
• 지연된 값의 이전 버전을 사용하여 먼저 렌더링하고, 나중에 최신 값으로 업데이트한다.

사용 예시

• 검색결과와 같은 큰 목록을 렌더링 할 때
• 사용자 입력에 따른, 실시간 필터링
• 무거운 계신이 필요한 데이터 표시

useTransition과 차이점

• useTransition은 상태업데이트를 지연시키는거고, 요거는 값 자체를 지연시키는것
• useDeferredValue는 선언적이고, 자동으로 작동하지만 useTransition은 명시적으로 사용 필요

장점

• 사용자 입력에 즉시 반응하면서도, 무거운 렌더링은 지연시킬 수 있음.
• 빠르게 변화하는 값에 대해 모든 변화를 즉시 반영하지 않아도 된다.
• 중요한 업데이트와 덜 중요한 업데이트를 구분하여 처리 할 수 있다.