# [[React 동시성 훅 ([[useTransition]], [[useDeferredValue]])]]

## 📌[[ brief]] Summary
React의 동시성 훅(Concurrent Hooks)인 `useTransition`과 `useDeferredValue`는 긴급한 업데이트와 비긴급 업데이트를 분리하여 UI의 응답성을 유지하는 데 사용되는 도구입니다 [1]. 이 훅들은 연산 속도 자체를 높이는 것이 아니라 무거운 연산이 메인 스레드를 차단하는 것을 방지함으로써 애플리케이션의 체감 속도를 높여줍니다 [2]. 결과적으로 사용자 피드백을 즉각적으로 처리하게 하여 INP(Interaction to Next Paint)와 같은 성능 지표를 개선하는 데 핵심적인 역할을 합니다 [3].

## 📖 Core Content
* **동시성 렌더링의 원리 및 효과:**
  React의 동시성 기능은 타이핑이나 클릭 같은 '긴급한 상호작용'과 대규모 리스트 필터링이나 차트 재계산 같은 '비긴급 업데이트'를 분리합니다 [1]. 이 기능은 React의 우선순위 시스템인 'Lane 모델'을 기반으로 작동하며, 특정 업데이트를 낮은 우선순위로 표시하여 UI의 응답성을 유지할 수 있게 합니다 [4]. 이 훅들을 사용하면 메인 스레드가 긴급한 사용자 상호작용에 즉시 대응할 수 있으므로, INP 점수를 낮추는 데 직접적으로 기여합니다 [3].

* **useTransition (비차단 상태 업데이트):**
  `useTransition`은 개발자가 상태 업데이트 코드를 직접 제어할 수 있을 때 사용합니다 [3]. 상태 변경 함수(`set[[State]]` 등)를 `[[startTransition]]`으로 감싸면, 해당 업데이트를 낮은 우선순위로 처리하여 메인 스레드가 여유로워질 때까지 연산을 지연시킵니다 [1, 3].
  * 주로 사용자가 타이핑할 때마다 검색 결과를 필터링하는 패턴이나, 데이터가 많은 애플리케이션에서의 탭 전환 등에 매우 효과적입니다 [1].
  * `isPending`이라는 플래그를 함께 제공하여, 무거운 연산이 백그라운드에서 실행되는 동안 사용자에게 즉각적인 시각적 피드백(예: 로딩 상태)을 줄 수 있습니다 [5].

* **useDeferredValue (무거운 렌더링 지연):**
  `useDeferredValue`는 외부 스토어나 부모 컴포넌트에서 props로 전달받는 등 상태 업데이트 코드를 직접 제어할 수 없을 때 상태 값 자체를 감싸기 위해 사용합니다 [3, 5].
  * 무거운 렌더링을 처리하는 동안 UI가 멈추는(freezing) 현상을 방지하기 위해, React는 새로운 결과가 준비될 때까지 화면에 이전 결과를 계속 표시합니다 [3].

## 🔗 Knowledge Connections
- **Related Topics:** [[React Fiber Architecture]], [[Lane Model]], INP (Interaction to Next Paint)
- **Projects/Contexts:** 검색어 입력 필터링 ([[Search]]-as-you-type), 데이터 집약적 대시보드의 탭 전환
- **Contradictions/Notes:** 동시성 훅(`useTransition`)과 디바운싱(Debouncing)은 불필요한 작업을 줄여준다는 공통점이 있지만 목적이 다릅니다. 컴포넌트 수준에서 UI 업데이트를 지연시키는 데는 React 네이티브 방식인 `useTransition`이 더 적합한 반면, 잦은 API 호출 빈도를 낮추는 데는 여전히 디바운싱 기법을 사용하는 것이 최선입니다 [6].

---
*Last updated: 2026-04-25*