知识库首页知识库-世界 rerender-dependencies.md

rerender dependencies

本地来源：Knowledge/World/项目/Practice/Claude-Skills/vercel-react-best-practices/rules/rerender-dependencies.md

title: Narrow Effect Dependencies impact: LOW impactDescription: minimizes effect re-runs tags: rerender, useEffect, dependencies, optimization

Narrow Effect Dependencies

Specify primitive dependencies instead of objects to minimize effect re-runs.

Incorrect (re-runs on any user field change):

useEffect(() => {
  console.log(user.id)
}, [user])

Correct (re-runs only when id changes):

useEffect(() => {
  console.log(user.id)
}, [user.id])

For derived state, compute outside effect:

// Incorrect: runs on width=767, 766, 765...
useEffect(() => {
  if (width < 768) {
    enableMobileMode()
  }
}, [width])

// Correct: runs only on boolean transition
const isMobile = width < 768
useEffect(() => {
  if (isMobile) {
    enableMobileMode()
  }
}, [isMobile])

本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-项目-Practice-Claude-Skills-vercel-react-best--60323a.md（仅本地保留，不入库不部署）