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

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Subscribe to Derived State	MEDIUM	减少重渲染频率	rerender, derived-state, media-query, optimization

订阅派生状态

订阅派生布尔状态而非连续值，以减少重渲染频率。

错误做法（每次像素变化都重渲染）：

function Sidebar() {
  const width = useWindowWidth()  // 持续更新
  const isMobile = width < 768
  return <nav className={isMobile ? 'mobile' : 'desktop'} />
}

正确做法（仅当布尔值变化时才重渲染）：

function Sidebar() {
  const isMobile = useMediaQuery('(max-width: 767px)')
  return <nav className={isMobile ? 'mobile' : 'desktop'} />
}