useDeferredValue 详解 + 与 useTransition 核心区别

React 中 useDeferredValue 的核心用法，以及它和高频搭档 useTransition 的区别，这两个都是 React 处理非紧急渲染/延迟更新的核心 Hooks，解决的是「页面卡顿、渲染优先级错乱」的问题，先讲 useDeferredValue 再讲区别，内容会非常清晰。

一、useDeferredValue 核心详解

是什么？

useDeferredValue 是 React 18+ 推出的内置 Hook，作用是：让一个 state/值「延迟更新」，优先级降到所有紧急渲染任务之后。

• 它接收一个原始值（可以是任意类型：state、props、普通变量、对象、数组等）作为参数，返回一个「延迟版本」的该值
• 它的核心逻辑：当页面存在高优先级更新（比如：输入框输入、按钮点击、表单提交、鼠标悬停）时，React 会优先完成这些高优先级渲染，等浏览器彻底空闲后，再去更新这个「延迟值」，并触发依赖该值的组件渲染。

核心作用 & 解决的问题

专门解决：「高优先级任务」和「低优先级任务」抢占渲染资源，导致页面卡顿、交互不流畅的问题。 典型场景：

1. 输入框实时搜索（输入是高优先级，搜索结果列表渲染是低优先级）
2. 大数据列表筛选/排序（筛选条件输入是高优先级，列表重渲染是低优先级）
3. 输入内容联动展示大体积组件（输入高优先级，联动组件渲染低优先级）

比如：输入框输入关键词，同时要渲染10000条搜索结果，不加处理时输入会非常卡顿——因为「输入更新」和「列表渲染」是同优先级，React 会同步执行。用 useDeferredValue 包裹搜索关键词后，输入会丝滑响应，列表会等输入完成、浏览器空闲后再渲染最新结果。

基础语法

import { useDeferredValue, useState } from 'react';

function Demo() {
  const [value, setValue] = useState('');
  // 生成延迟值：deferredValue 会滞后于原始 value 更新
  const deferredValue = useDeferredValue(value);

  return (
    <div>
      {/* 高优先级：输入框实时响应，绝不卡顿 */}
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      {/* 低优先级：依赖延迟值，等输入完成后再渲染 */}
      <HeavyComponent data={deferredValue} />
    </div>
  );
}

关键特性

1. 被动延迟，无「启动/控制」逻辑：useDeferredValue 是纯被动的 —— 它只是对「传入的值」做延迟处理，不会主动触发更新，更新的触发源永远是「原始值的变化」（比如上面的 value 变化）。
2. 自动防抖/节流的效果（天然特性）：对于高频变化的值（比如输入框每秒输入10次），useDeferredValue 不会每次都更新，而是会「合并」多次更新，等高优先级任务结束后一次性更新到最新值，不需要手动写防抖节流。
3. 与 React 并发渲染深度结合：它是 React 并发特性的一部分，只有在 React 18+ 的并发模式下生效，延迟的时机由 React 自己调度，不是固定的 setTimeout 延迟，更智能。
4. 返回值是「快照」：延迟值是原始值的快照，在高优先级渲染期间，延迟值会保持旧值不变，直到低优先级渲染执行，这能保证高优先级组件不被打断。

二、useTransition 核心详解（前置铺垫，方便对比）

为了让你彻底分清两者，先快速讲透 useTransition，它也是 React 18+ 处理「优先级渲染」的核心 Hook，和 useDeferredValue 是「同场景、不同实现思路」。

是什么？

useTransition 的作用是：将「某个状态更新操作」标记为「低优先级」的非紧急更新，让这个更新排队到所有高优先级更新之后执行。

• 语法：const [isPending, startTransition] = useTransition()
• 两个返回值：
  1. isPending：布尔值，标记「低优先级更新」是否还在排队中（可用来做加载态）
  2. startTransition：包裹函数，里面的 setState 操作都会被标记为低优先级

基础语法

import { useTransition, useState } from 'react';

function Demo() {
  const [value, setValue] = useState('');
  const [list, setList] = useState([]);
  // 获得 加载态标记 + 低优先级更新函数
  const [isPending, startTransition] = useTransition();

  // 输入框变化：高优先级更新
  const handleChange = (e) => {
    const val = e.target.value;
    setValue(val); // 高优先级：立即更新，输入框丝滑响应
    // 包裹的setList是低优先级：等输入完成后再执行
    startTransition(() => {
      const newList = getSearchList(val); // 耗时的列表筛选
      setList(newList);
    });
  };

  return (
    <div>
      <input value={value} onChange={handleChange} />
      {isPending && <div>加载中...</div>}
      <HeavyList list={list} />
    </div>
  );
}

关键特性

1. 主动标记，显式控制更新：useTransition 是主动的 —— 它通过 startTransition 函数，主动把里面的 setState 标记为低优先级，更新的触发源是「被包裹的 setState」。
2. 自带加载态反馈：返回的 isPending 可以精准判断低优先级更新的「排队状态」，能很方便的给用户展示「加载中」提示，提升体验。
3. 只作用于「状态更新」：它的核心是「修改 setState 的优先级」，只能包裹状态更新操作（setXxx），不能包裹普通变量/值。

三、useDeferredValue 与 useTransition 的「相同点」（底层同源）

两者是 React 为了解决同一类问题设计的，底层原理完全一致，优先级调度逻辑相同，这是理解区别的前提，先记相同点，再记区别，永远不会混：

1. 都属于 React 18 并发渲染（Concurrent Mode） 的特性，只有在 React 18+ 才能使用；
2. 核心目标一致：都是降低更新的优先级，让「低优先级任务」排队到「高优先级任务」之后执行，解决页面卡顿、交互不流畅的问题；
3. 调度逻辑一致：两者的延迟/排队，都不是「固定时间延迟」（比如 setTimeout），而是由 React 调度，浏览器空闲时才执行，优先级规则完全相同；
4. 中断恢复机制一致：如果在低优先级更新执行过程中，出现了新的高优先级更新（比如输入框又输入了新内容），React 会立即中断低优先级更新，先处理高优先级，等空闲后再继续低优先级更新。

一句话总结相同点：两者是「同根同源、殊途同归」，解决同一个问题，只是实现思路不同。

四、useDeferredValue 与 useTransition 的「核心区别」

这是你最关心的核心内容，我分「核心差异（本质区别）+ 详细维度对比 + 适用场景对比」三层讲解，保证你看完彻底分清，再也不会混淆。

本质核心区别

一句话概括：作用的目标对象完全不同

1. useDeferredValue → 作用于「值」：它是对「一个数据/值」进行加工，返回一个「延迟版本的值」，它不改变任何更新的优先级，只是让「依赖这个延迟值的组件」在值更新后再渲染。 → 逻辑：原始值变化（高优先级）→ 延迟值滞后变化 → 依赖延迟值的组件滞后渲染
2. useTransition → 作用于「状态更新操作（setState）」：它不加工任何值，而是直接修改 setState 的优先级，让这个 setState 操作本身滞后执行，组件的渲染时机由这个低优先级的 setState 决定。 → 逻辑：高优先级 setState 执行 → 低优先级 setState 被标记后滞后执行 → 组件滞后渲染

详细维度对比表

适用场景对比（怎么选？看完立刻会用）

优先用 useDeferredValue 的场景

场景特征：只需要「延迟一个值的更新」，进而延迟依赖该值的组件渲染，逻辑简单，无需要加载态。

1. 输入框 → 联动展示/渲染组件（只需要延迟「输入值」）
2. 单个值变化 → 触发单个组件的重渲染
3. 不想改动原有 setState 逻辑，只想让「值的生效时机」延后

示例：输入框输入关键词，展示筛选后的列表，只需要延迟关键词即可，用 useDeferredValue 更简洁：

const [keyword, setKeyword] = useState('');
const deferredKeyword = useDeferredValue(keyword);
// 列表只依赖延迟后的关键词，自动滞后渲染
return <List data={getList(deferredKeyword)} />

优先用 useTransition 的场景

场景特征：需要「延迟一个/多个 setState 操作」，或者需要给用户展示加载态，逻辑相对复杂。

1. 一个操作触发多个低优先级的状态更新（比如：筛选+排序，需要同时 setList + setSortType）
2. 必须展示「加载中」提示，提升用户体验
3. 异步操作后的数据更新，需要标记为低优先级

示例：输入框输入关键词，筛选列表+记录筛选历史，需要两个 setState，用 useTransition 更合适：

const handleChange = (e) => {
  setKeyword(e.target.value); // 高优先级
  startTransition(() => {
    setList(getList(e.target.value)); // 低优先级
    setHistory([...history, e.target.value]); // 低优先级，多个更新一起延迟
  });
};

五、补充：两者可以「配合使用」吗？

可以！而且在复杂场景下，配合使用效果更好。 比如：既有「需要延迟的值」，又有「需要延迟的多个 setState」，还需要加载态。两者的优先级调度逻辑一致，配合使用不会有冲突，只会让渲染的优先级控制更精准。

总结

1. useDeferredValue 是延迟值，被动处理，作用于「值」，适合简单的延迟渲染场景，无加载态；
2. useTransition 是延迟更新，主动标记，作用于「setState」，适合复杂的多状态更新场景，自带加载态；
3. 两者底层同源、目标一致，都是解决「优先级渲染卡顿」的问题，选谁看需求：要延迟「值」用前者，要延迟「更新操作」或要加载态用后者。