skillhub-088-vercel-react-best-practices/rules/advanced-effect-event-deps.md

title, impact, impactDescription, tags

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

不要将 Effect Event 放入依赖数组

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

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

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）：

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 出现在依赖项中