skillhub-088-vercel-react-best-practices/rules/rerender-transitions.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
对非紧急更新使用过渡（Transitions）	MEDIUM	保持 UI 响应性	rerender, transitions, startTransition, performance

对非紧急更新使用过渡（Transitions）

将频繁的、非紧急的状态更新标记为过渡（transition），以保持 UI 的响应性。

错误做法（每次滚动都会阻塞 UI）：

function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0)
  useEffect(() => {
    const handler = () => setScrollY(window.scrollY)
    window.addEventListener('scroll', handler, { passive: true })
    return () => window.removeEventListener('scroll', handler)
  }, [])
}

正确做法（非阻塞更新）：

import { startTransition } from 'react'

function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0)
  useEffect(() => {
    const handler = () => {
      startTransition(() => setScrollY(window.scrollY))
    }
    window.addEventListener('scroll', handler, { passive: true })
    return () => window.removeEventListener('scroll', handler)
  }, [])
}