무거운 리스트 필터링 작업 때문에 사용자의 타이핑이 뚝뚝 끊기는 경험을 해본 적이 있나요? React 18의 useTransition과 useDeferredValue를 사용하면, 무거운 작업의 렌더링 우선순위를 낮추어 사용자 입력 같은 중요한 상호작용을 먼저 처리(블로킹 방지)할 수 있습니다.
| Hooks | 주 사용 목적 | 특징 |
|---|---|---|
| useTransition | 상태(State) 업데이트 함수의 우선순위를 낮춤 | isPending 상태를 제공하여 로딩 UI 표시 가능 |
| useDeferredValue | 값(Value) 자체의 업데이트를 지연시킴 | Prop으로 넘겨받는 값을 디바운스처럼 지연시킬 때 유리함 |