[React] useDeferredValue

✅ useDeferredValue

useDeferredValue 훅은 의도적으로 특정 UI 업데이트를 지연시키고 싶을 때 사용할 수 있는 훅이다. 
상태 업데이트를 지연하는 useTransition과 다르게 값의 업데이트 우선순위를 지정하는 것

 

상태값 변화에 따른 무거운 연산이 발생하는 경우 값 업데이트를 지연시켜 백그라운드에서 리렌더링을 수행하게 해서 급한 렌더링을 먼저 처리하는 것이다. 

 

예를 들어 입력 필드 타이핑은 즉시 반영하지만, 리스트와 같은 것은 나중에 반영시키는 것이다. 

• 참고:
  나중에 나오는 useOptimistic 는 이와는 반대의 개념이다.
  서버의 응답을 기다리지 않고 UI를 먼저 업데이트를 해준다. (예를 들어 좋아요기능)

import { memo } from 'react';

const SlowList = memo(function SlowList({ text }: { text: string }) {
  // Log once. The actual slowdown is inside SlowItem.
  console.log('[ARTIFICIALLY SLOW] Rendering 250 <SlowItem />');

  const items = [<SlowItem key={0} text={text} />];
  for (let i = 0; i < 250; i++) {
    items.push(<SlowItem key={i + 1} text={text} />);
  }
  return <ul className='items'>{items}</ul>;
});

function SlowItem({ text }: { text: string }) {
  const startTime = performance.now();
  while (performance.now() - startTime < 1) {
    
  }

  return <li className='item'>Text: {text}</li>;
}

export default SlowList;

 

const [searchStr, setSearchStr] = useState('');
const deferedQuery = useDeferredValue(searchStr);

return (
 <>
	<input value={searchStr} onChange={(e) => setText(e.target.value)} />
	<SlowList text={deferedQuery} />
 </>
);

• searchStr 이 변경 될 때마다 입력 필드는 변경이 된다.
• deferedQuery는 다른 UI 업데이트가 완료된 후에만 업데이트 된다. 
• setState와 render이 완료되고 SlowList를 set 해줘 ➡️ 모두 렌더링 되기 전까진 상태를 업데이트하지 않겠다. 
  • input처럼 상태값이 잦은 변경이 일어날때 , 예를 들어 검색어를 입력할 때 연관 검색어가 나오는 경우
    값이 변경이 될 때마다 api를 호출하게 되면 너무 많은 호출이 일어나게 되어 부하가 발생한다. 
    이러한 현상을 해결하기 위해서 useDeferredValue를 사용하면 된다. 
• useDeferredValue에 리액트 19부터 초깃값이 추가되었다.

공식 문서에서 위의 예시를 실행해 볼 수 있다.

https://react.dev/reference/react/useDeferredValue

useDeferredValue – React