useTransition() 훅과 useDeferredValue() 훅

useTransition() 훅

useTransition()은 react 18버전에서 도입된 새로운 훅이다. 이 훅은 UI 업데이트를 부드럽게 처리하고 사용자 경험을 향상시키기 위해 사용된다. 이 훅을 사용하여 특정 상태 업데이트의 우선순위가 더 낮다는 것을 react에 알릴 수 있으며 다른 state 업데이트들 또는 UI 렌더링 트리거가 더 높은 우선순위를 가진다.

useTransition() 을 선언하면 다음과 같이 길이가 2인 튜플을 반환한다.

const [isPending, startTransition] = useTransition();

우선 순위가 낮은 상태 업데이트가 아직 보류 중인지 여부를 알려주는 boolean 값인 isPending 과, 상태 업데이트를 둘러싸서 알릴 수 있는 startTransition() 함수이다.
이 함수 안에 state 업데이트를 작성해주면 react는 우선 순위가 낮은 업데이트라고 판단해 가장 나중에 한다. 계산이 무겁고, 우선순위가 낮은 state에 이 훅을 적용해준 후 isPending 시간에 loading UI를 그려주면 더 나은 사용자 경험을 나타낼 수 있다.

const TransitionTest = () => {
  const [name, setName] = useState('');
  const [isPending, startTransition] = useTransition();
  
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    startTransition(()=>{
      setName(e.target.value) 
    });
  }
  
  return (
    <div>
      <input onChange={handleChange} />
        {
          isPending ? <Loading /> : (<>
              로직 처리...      
        </>)     
        }
    </div>
  )
}

export default TransitionTest; 

useDeferredValue() 훅

이 훅도 useTransition() 훅과 비슷하게 react 18부터 도입된 훅 중 하나로, 상태관리의 우선순위를 지정한다. 차이점은 useTransition() 훅은 setState() 와 같은 함수의 우선순위라면, useDeferredValue() 훅은 값의 우선순위에 따라 값을 지연한다. 동작 방식은 거의 동일하다.

useDeferredValue() 훅은 useMemo() 훅과 함께 사용하면 더욱 효과적이다. 종속된 값들을 메모이제이션하면 불필요한 리랜더링을 방지하며 하위 컴포넌트나 상태의 업데이트를 지연시킬 수 있다. 주로 이벤트가 재빠르게 일어나는 검색어 자동완성 기능에 적용하면 효과적인 렌더링을 할 수 있다.

import React, { useState, useDeferredValue, useMemo } from 'react';

function DeferredTest() {
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text);
  
  const autoCompletes = useMemo(() => {
    return (
      <div>
        {....}  			// 필요한 로직 작성
      </div>
    );
  
  // dependency 배열에 기존 state인 text를 넣어주는 것이 아니라 deffered로 감싼 값을 넣어준다.
  }, [deferredText]);		

  return (
    <div>
      <input onChange={(e) => setText(e.target.value)} />
      {autoCompletes}
    </div>
  );
}

export default DeferredTest;

이를 통해 사용자의 상호작용에 의한 UI 업데이트를 지연시켜 부드럽고 일관된 경험을 제공할 수 있다. 이 기능은 예기치 않은 UI 변화를 방지하고 사용자가 변화에 대해 더 잘 대응할 수 있도록 돕는다.