React useDeferredValue 降低搜索结果渲染阻塞

搜索页最容易出现一种“输入框先卡住”的体验：每敲一个字符，结果列表、卡片或图表都跟着做一轮很重的渲染。React 的 useDeferredValue 适合把非关键结果区域降为可中断的后台更新，让输入状态先保持同步。它不产生固定延时，也不会自动减少每次按键触发的网络请求。

官方地址：https://react.dev/reference/react/useDeferredValue

先把输入响应和结果渲染分成两层

useDeferredValue(value) 返回一个可能暂时落后的值。用户输入时，页面先用新 query 完成轻量更新，结果列表继续消费上一次的 deferredQuery；当后台渲染有机会完成，再把结果切到新关键词。这个“落后”是为了保住交互优先级，不是人为等待几百毫秒。

import { memo, useDeferredValue, useState } from 'react';

const SearchResults = memo(function SearchResults({ query }) {
  // 结果组件只在延后关键词真正变化时重新渲染
  return ;
});

export default function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);

  return (
    
 {
          // 输入状态必须同步更新，保证受控输入框不回弹
          setQuery(event.target.value);
        }}
        placeholder="搜索组件或文档"
      />
      
  );
}

为什么结果组件需要 memo

父组件因为 query 改变而快速重渲染时，deferredQuery 可能仍保持旧引用。只有结果组件能根据相同 props 跳过本轮渲染，这个旧值才有意义，所以示例使用 memo。如果结果组件每次都无条件重渲染，延后值虽存在，昂贵工作仍会跟着父组件发生。

如果传入的是对象，避免在渲染中临时创建新对象再交给 useDeferredValue，否则每轮引用都不同，会不断触发后台重渲染。搜索词这类字符串更容易保持稳定。

把“渲染变轻”和“请求变少”分开验收

useDeferredValue 只调整 UI 更新的优先级。若结果区域根据关键词直接请求接口，用户每敲一次键仍可能产生一次请求；需要减少请求时，再加入防抖、请求取消、缓存或服务端查询合并。结果加载配合 Suspense 时，React 可以在新内容准备好前继续显示旧结果，但这仍不是网络节流。

// 这里只演示请求策略的边界：防抖负责减少请求，不替代 useDeferredValue
let timer;
function scheduleSearch(keyword, request) {
  // 清理上一次定时器，避免每个按键都立即发出请求
  clearTimeout(timer);
  timer = setTimeout(() => {
    // 真实项目还应结合 AbortController 取消过期请求
    request(keyword);
  }, 240);
}

一份可执行的验收清单

• 输入框在慢列表存在时仍能连续输入，受控值不回弹。
• 结果区域能明确表现“正在追赶”的旧结果状态，数据切换后提示消失。
• React Profiler 中确认慢组件由延后值驱动，并检查 memo 是否真的减少无效渲染。
• 浏览器网络面板单独统计请求数；若仍过多，处理防抖、取消、缓存，而不是继续调大所谓延迟。
• 列表本身过大时加入分页或虚拟化，避免把所有压力都交给并发渲染。

常见问题

useDeferredValue 和防抖应该二选一吗

不必。前者解决渲染阻塞，后者解决请求频率；搜索页常见组合是实时输入、延后结果渲染，再用防抖控制接口调用。

为什么加了 useDeferredValue 还是感觉卡

先检查慢组件是否使用 memo，再看是否在渲染中创建了不稳定对象；如果单次列表工作已经过重，还需要虚拟化、拆分组件或减少计算量。

落地时可以把验收拆成三项：输入响应看交互，结果收敛看渲染，请求数量看网络。三项分别有证据，才能知道优化到底落在了正确边界。