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

title, impact, impactDescription, tags

title	impact	impactDescription	tags
收窄 Effect 依赖	LOW	减少 effect 的重复执行	rerender, useEffect, dependencies, optimization

收窄 Effect 依赖

使用原始类型依赖而非对象依赖，以减少 effect 的重复执行。

不正确的写法（任何 user 字段变化都会重新执行）：

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

正确的写法（仅当 id 变化时才重新执行）：

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

对于派生状态，在 effect 外部计算：

// 不正确的写法：width=767, 766, 765……每次变化都会执行
useEffect(() => {
  if (width < 768) {
    enableMobileMode()
  }
}, [width])

// 正确的写法：仅在布尔值变化时执行
const isMobile = width < 768
useEffect(() => {
  if (isMobile) {
    enableMobileMode()
  }
}, [isMobile])