跳到主要内容

useTransition

面试速答（30 秒版 TL;DR）​

  • useTransition 是 React 18 的并发特性 Hook，用来把一部分更新标记为低优先级过渡更新。
  • 它返回 [isPending, startTransition]。
  • 核心价值是：把“可以稍后完成”的重更新让位给更紧急的交互更新，例如输入框输入优先，列表筛选结果随后更新。
  • 它不是异步请求 Hook，也不会自动让代码并行，只是在 React 调度层给更新标优先级。

1. 它解决什么问题​

有些更新必须马上反映：

  • 输入框字符回显
  • 按钮按下反馈

有些更新可以慢一点：

  • 大列表筛选
  • 复杂图表重算
  • 大块内容切换

React 18 希望把这两类更新区分开，不让重更新卡住高优先级交互。

2. 基本用法​

const [isPending, startTransition] = useTransition()

function handleChange(value: string) {
  setInputValue(value)

  startTransition(() => {
    setKeyword(value)
  })
}

这里的心智模型是：

  • setInputValue：紧急更新，先保证输入顺滑
  • setKeyword：过渡更新，可以稍后完成

3. 它不是在做什么​

3.1 不是发请求 Hook​

useTransition 不负责网络请求生命周期，也不会替代：

  • useEffect
  • 数据库查询
  • loading 状态库

3.2 不是节流/防抖​

它不会减少更新次数，而是让 React 更聪明地安排更新优先级。

4. React 18 下的典型场景​

4.1 搜索过滤​

  • 输入框值立刻更新
  • 大列表过滤结果过渡更新

4.2 路由切换中的非阻塞更新​

如果页面切换后有较重的组件树更新，过渡更新可以让界面更平滑。

5. isPending 有什么用​

它表示当前过渡更新是否还没完成。

常见用法：

{isPending && <span>加载中...</span>}

注意它表达的是“过渡中的渲染状态”，不是通用请求状态。

6. 面试高频答法​

Q1：useTransition 的核心价值是什么？​

把更新分出优先级，让用户输入、点击这类紧急交互不被重渲染拖慢。

Q2：它和防抖有什么区别？​

  • 防抖：减少触发频率
  • transition：不减少次数，但降低某些更新优先级

Q3：它和 useDeferredValue 有什么关系？​

都和“把非紧急更新往后放”有关。

  • useTransition：你主动包一段更新
  • useDeferredValue：你把某个值的消费延后

常见追问​

1）所有更新都包 startTransition 会更好吗？​

不会。紧急更新也被降级后，用户反而会觉得界面迟钝。

2）为什么输入框值本身通常不要放进 transition？​

因为输入回显属于最高优先级交互，应该立即响应。

易错点/坑​

  • 以为 useTransition 等于“异步请求管理”。
  • 把所有更新都包进 startTransition。
  • 不区分“交互紧急更新”和“可延后的重更新”。

速记要点（可背诵）​

  • useTransition：React 18 并发特性，给更新降优先级。
  • 典型场景：输入回显优先，重列表/图表更新延后。
  • 它是调度优化，不是请求 Hook，也不是防抖。