[TIL] useTransition useDeferredValue

1. 오늘의 질문

React에서 useTransition과 useDeferredValue 훅을 사용하여 사용자 인터페이스의 응답성을 개선하는 방법을 설명하고, 각각의 훅이 언제 적합하게 사용될 수 있는지 얘기해주세요.

2. useTransition

: 상태 업데이트를 긴급하지 않은 것으로 표시하여 더 중요한 업데이트가 먼저 처리되도록 함으로써 즉각적인 응답을 기대하는 기능에 대해 우선순위를 둘 수 있습니다.
주로 사용자 인터랙션으로 인한 큰 상태 변화가 있을 때 사용합니다. 예를들어, 사용자가 input에 검색어를 입력중이면, 입력하고 있는 검색어는 즉각적으로 보여질 수 있도록 하고 입력된 값에 맞는 결과물을 보여주는건 지연시킵니다.

상태를 변경하는 작업 자체를 지연

const [isPending, startTransition] = useTransition();
const [searchQuery, setSearchQuery] = useState('');

const handleChange = (e) => {
  // 입력은 즉시 반영
  setSearchQuery(e.target.value);
  
  // 검색 결과 필터링은 나중에 처리
  startTransition(() => {
    setFilteredResults(items.filter(item => 
      item.name.includes(e.target.value)
    ));
  });
}

return (
  <>
    <input value={searchQuery} onChange={handleChange} />
    {isPending && <Spinner />}
    <ResultsList items={filteredResults} />
  </>
);

3. useDeferredValue

값의 전달과 사용을 지연시킵니다.
주로 계산이 오래 걸리는 경우 값을 지연시켜서 전달합니다.
"급하지 않은 UI 업데이트"를 나중으로 미뤄서 중요한 UI 업데이트(예: 입력 필드)가 먼저 처리되도록 하는 것입니다. 이는 특히 데이터 시각화, 큰 리스트 렌더링, 복잡한 계산이 필요한 컴포넌트에서 유용합니다.

이미 변경된 값의 적용을 지연

참고

https://vroomfan.tistory.com/45

https://doiler.tistory.com/83

https://velog.io/@ktthee/React-18-%EC%97%90-%EC%B6%94%EA%B0%80%EB%90%9C-useDeferredValue-%EB%A5%BC-%EC%8D%A8-%EB%B3%B4%EC%9E%90

https://velog.io/@jerrychu/React-18-useTransition%EA%B3%BC-useDeferredValue%EB%9E%80