useTransition, useDeferredValue에 대해 알아보기

• React 18에서 새로이 생긴 훅으로 useTransition, useDeferredValue가 있다.
• 이 두 훅의 사용으로 쓰로틀링과 디바운싱을 간단하게 해결할 수 있다.
• useTransition, useDeferredValue를 사용하면 실행순서를 뒤로 미룰 수 있다.

useTransition

const [isPending, startTransition] = useTransition();

• useTransition을 사용하는 대표적인 예로 검색 미리보기를 들 수 있다.
• 검색 결과가 많으면 렌더링이 많아져 렉이 걸릴 수도 있다.
• 나중에 업데이트 해도 되는, 우선순위가 낮은 함수를 구분할 수 있게 해준다.
• startTransition 인자로 콜백 함수를 넣는데 내부에 우선순위가 낮은, 나중에 실행될 함수를 넣는다.

startTransition(() => {
   setState(prev => prev + 1);
});

• setState는 천천히, 미뤄져서 한 번에 처리 하는 느낌으로 실행된다.
• 랜더링이 바로바로 일어나야하는 중요한 함수는 startTransition 밖에 작성하고, 렌더링이 매번 일어날 필요가 없는 함수는 startTransition 내부에서 실행한다.
• 렌더링이 많이 일어나지만, 업데이트 중요도가 낮은 함수를 startTransition를 통해서 최적화할 수 있다.
• isPending은 startTransition가 실행되기 전에 true가 되고, 실행되지 않는동안 false가 된다.
• isPending을 이용하여 spinner, 로딩창을 띄울 수 있다.

 

useDeferredValue

• useTransition을 사용하지 않고 비슷하게 우선순위가 낮은 변수값을 설정할 수 있다.
• useDeferredValue 내부에 인자로 들어간 변수는 우선순위가 낮은 변수가 된다.
• 업데이트가 바로바로 되지 않아도 괜찮은 변수가 된다.

  const [value, setValue] = useState('');
  const deferredValue = useDeferredValue(value);

• useDeferredValue는 useMemo와도 함께 사용할 수 있다.

const result = useMemo(() => (deferredValue + " is the value"), [deferredValue]);

• 리액트는 이 우선순위가 낮춰진 함수/변수를 성능에 여유가 있을 때 실행/업데이트한다.

 

https://beta.reactjs.org/reference/react/useTransition#usetransition

useTransition

https://beta.reactjs.org/reference/react/useDeferredValue

useDeferredValue