---
title: Do Not Put Effect Events in Dependency Arrays
impact: LOW
impactDescription: 避免不必要的 Effect 重跑与 Lint 错误
tags: advanced, hooks, useEffectEvent, dependencies, effects
---

## 不要将 Effect Event 放入依赖数组

Effect Event 函数没有稳定的标识。其标识有意地在每次渲染时发生变化。不要将 `useEffectEvent` 返回的函数放入 `useEffect` 的依赖数组中。应将实际响应式的值保留为依赖项，并在 effect 体内部或该 effect 创建的订阅中调用 Effect Event。

**错误做法（将 Effect Event 添加为依赖项）：**

```tsx
import { useEffect, useEffectEvent } from 'react'

function ChatRoom({ roomId, onConnected }: {
  roomId: string
  onConnected: () => void
}) {
  const handleConnected = useEffectEvent(onConnected)

  useEffect(() => {
    const connection = createConnection(roomId)
    connection.on('connected', handleConnected)
    connection.connect()

    return () => connection.disconnect()
  }, [roomId, handleConnected])
}
```

将 Effect Event 包含在依赖项中会导致 effect 在每次渲染时都重新运行，并触发 React Hooks 的 Lint 规则告警。

**正确做法（依赖响应式值，而非 Effect Event）：**

```tsx
import { useEffect, useEffectEvent } from 'react'

function ChatRoom({ roomId, onConnected }: {
  roomId: string
  onConnected: () => void
}) {
  const handleConnected = useEffectEvent(onConnected)

  useEffect(() => {
    const connection = createConnection(roomId)
    connection.on('connected', handleConnected)
    connection.connect()

    return () => connection.disconnect()
  }, [roomId])
}
```

参考链接：[React useEffectEvent：Effect Event 出现在依赖项中](https://react.dev/reference/react/useEffectEvent#effect-event-in-deps)