[React] useDeferredValue

이전 관련 글

2023.03.23 - [개발/React] - [React] lodash를 활용한 debounce

2023.03.26 - [개발/React] - [React] useTransition 알아보기

useDeferredValue

useDeferredValue도 useTransition과 마찬가지로 React 18에 들어와서 새로 도입된 HOOK이다.

 

 

사용방법

const deferredValue = useDeferredValue(value);

 

useDeferredValue에 값이 들어오게 되면, 렌더링 우선순위에 따라 값을 반환하게 된다.

useTransition은 setState와 같은 함수의 우선순위라면, useDeferredValue는 값의 우선순위에 따라 값을 지연하게 된다.

 

이는 api호출 시 디바운싱과 동일하다고 보면 된다.

useDeferredValue와 useTransition의 동작방식은 거의 동일하며, useTransition은 setState를 트리거할 때, useDeferredValue는 상위 구성요소에서 새 데이터를 수신할 때 사용된다.

 

 

React공식문서의 예제를 보면, useDeferredValue를 useMemo와 같이 사용하여 기존과 변경이 있을 때만 다시 렌더링 하게 하여, 불필요한 렌더링을 막아준다.

function Typeahead() {
  const query = useSearchQuery('');
  //useDeferredValue 사용
  const deferredQuery = useDeferredValue(query);

  // Memoizing tells React to only re-render when deferredQuery changes,
  // not when query changes.
  const suggestions = useMemo(() =>
    <SearchSuggestions query={deferredQuery} />,
    [deferredQuery]
  );

  return (
    <>
      <SearchInput query={query} />
      <Suspense fallback="Loading results...">
        {suggestions}
      </Suspense>
    </>
  );
}

 

위 예제는 검색 자동완성을 처리하는 코드이며, useDeferredValue를 사용하면 디바운싱을 따로 적용하지 않아도 유저 경험을 더 좋게 할 수 있다.