React 18中useDeferredValue未按预期工作的原因与解决办法

核心原因 #

useDeferredValue的延迟逻辑仅在主渲染任务耗时较长时才会触发。React的设计逻辑是：如果当前渲染能快速完成（比如你的示例里只是更新输入框和两个文本节点，渲染耗时微乎其微），它会直接同步更新延迟值，不会拆分渲染流程。只有当主渲染存在明显性能瓶颈（比如渲染大量DOM节点、复杂计算）时，React才会优先用旧值完成当前渲染，再在后台异步更新延迟值。

解决方法 #

1. 模拟主渲染耗时场景（验证延迟效果）

要看到useDeferredValue的实际效果，需要让主渲染足够慢。比如在组件中渲染一个包含大量元素的列表，强制主渲染耗时：

const [query, setQuery] = useState("");
const deferredQuery = useDeferredValue(query);

// 模拟主渲染耗时：渲染10000个元素
const renderHeavyList = () => {
  const list = [];
  for (let i = 0; i < 10000; i++) {
    list.push(<div key={i}>Item {i}: {query}</div>);
  }
  return list;
};

return (
  <div>
    <input value={query} onChange={(e) => setQuery(e.target.value)} />
    <p>Query: {query}</p>
    <p>Deferred Query: {deferredQuery}</p>
    {/* 耗时渲染部分 */}
    <div>{renderHeavyList()}</div>
  </div>
);

此时输入内容时，你会看到Query立刻更新，而Deferred Query会短暂保持旧值，等主渲染完成后再更新。

2. 结合数据请求场景的优化

在你的数据请求场景中，除了确保主渲染有足够耗时，还需要注意以下两点：

• 给请求加防抖处理：deferredValue更新可能会触发多次，需要给请求加防抖，避免无效请求：

  const fetchSth = useCallback(async (query) => {
    // 防抖：延迟300ms再发起请求
    const timer = setTimeout(async () => {
      const res = await fetchSomething(query);
      setStuff(res);
    }, 300);
    return () => clearTimeout(timer);
  }, []);
  
  useEffect(() => {
    const cancel = fetchSth(deferredQuery);
    return cancel;
  }, [deferredQuery, fetchSth]);
  

• 用useMemo包裹依赖延迟值的耗时组件：如果数据渲染本身也耗时，可以把数据展示部分封装后用useMemo基于deferredQuery缓存，确保只有延迟值更新时才重新渲染：

  const StuffsList = useMemo(() => {
    // 模拟数据渲染耗时
    return stuff.map((item, idx) => <div key={idx}>{item}</div>);
  }, [stuff]);
  
  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <p>Query: {query}</p>
      <p>Deferred Query: {deferredQuery}</p>
      {StuffsList}
    </div>
  );
  

关键注意点 #

• useDeferredValue不是用来实现“固定延迟时间”的工具，它是基于渲染优先级的优化手段，只有当主渲染阻塞时才会生效。
• 配合<Suspense>使用时，延迟值的更新会和Suspense的fallback状态配合，进一步提升用户体验，但前提是存在异步渲染场景（比如React.lazy加载组件、Suspense支持的数据请求）。

内容的提问来源于stack exchange，提问作者Pluto