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

## 收窄 Effect 依赖

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

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

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

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

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

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

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

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