57 lines
1.8 KiB
Markdown
57 lines
1.8 KiB
Markdown
---
|
|
title: Do Not Put Effect Events in Dependency Arrays
|
|
impact: LOW
|
|
impactDescription: avoids unnecessary effect re-runs and lint errors
|
|
tags: advanced, hooks, useEffectEvent, dependencies, effects
|
|
---
|
|
|
|
## Do Not Put Effect Events in Dependency Arrays
|
|
|
|
Effect Event functions do not have a stable identity. Their identity intentionally changes on every render. Do not include the function returned by `useEffectEvent` in a `useEffect` dependency array. Keep the actual reactive values as dependencies and call the Effect Event from inside the effect body or subscriptions created by that effect.
|
|
|
|
**Incorrect (Effect Event added as a dependency):**
|
|
|
|
```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])
|
|
}
|
|
```
|
|
|
|
Including the Effect Event in dependencies makes the effect re-run every render and triggers the React Hooks lint rule.
|
|
|
|
**Correct (depend on reactive values, not the 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])
|
|
}
|
|
```
|
|
|
|
Reference: [React useEffectEvent: Effect Event in deps](https://react.dev/reference/react/useEffectEvent#effect-event-in-deps)
|