skillhub-088-vercel-react-best-practices/rules/rerender-use-deferred-value.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
使用 useDeferredValue 处理昂贵的派生渲染	MEDIUM	在繁重计算期间保持输入响应	rerender, useDeferredValue, optimization, concurrent

使用 useDeferredValue 处理昂贵的派生渲染

当用户输入触发昂贵的计算或渲染时，使用 useDeferredValue 来保持输入响应。被延后的值会滞后，让 React 优先处理输入更新，并在空闲时再渲染昂贵的结果。

错误做法（过滤时输入感觉卡顿）：

function Search({ items }: { items: Item[] }) {
  const [query, setQuery] = useState('')
  const filtered = items.filter(item => fuzzyMatch(item, query))

  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <ResultsList results={filtered} />
    </>
  )
}

正确做法（输入保持流畅，结果就绪后渲染）：

function Search({ items }: { items: Item[] }) {
  const [query, setQuery] = useState('')
  const deferredQuery = useDeferredValue(query)
  const filtered = useMemo(
    () => items.filter(item => fuzzyMatch(item, deferredQuery)),
    [items, deferredQuery]
  )
  const isStale = query !== deferredQuery

  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <div style={{ opacity: isStale ? 0.7 : 1 }}>
        <ResultsList results={filtered} />
      </div>
    </>
  )
}

适用场景：

• 过滤/搜索大型列表
• 响应输入变化的昂贵可视化（图表、图形）
• 任何会导致明显渲染延迟的派生状态

注意： 将昂贵的计算用 useMemo 包裹，并把被延后的值作为依赖项，否则它仍然会在每次渲染时执行。

参考文档：React useDeferredValue