Cursor rule

1---
2alwaysApply: false
3---
4 
5## Do Not Put Effect Events in Dependency Arrays
6 
7Effect 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.
8 
9**Incorrect (Effect Event added as a dependency):**
10 
11```tsx
12import { useEffect, useEffectEvent } from 'react'
13 
14function ChatRoom({ roomId, onConnected }: {
15  roomId: string
16  onConnected: () => void
17}) {
18  const handleConnected = useEffectEvent(onConnected)
19 
20  useEffect(() => {
21    const connection = createConnection(roomId)
22    connection.on('connected', handleConnected)
23    connection.connect()
24 
25    return () => connection.disconnect()
26  }, [roomId, handleConnected])
27}
28```
29 
30Including the Effect Event in dependencies makes the effect re-run every render and triggers the React Hooks lint rule.
31 
32**Correct (depend on reactive values, not the Effect Event):**
33 
34```tsx
35import { useEffect, useEffectEvent } from 'react'
36 
37function ChatRoom({ roomId, onConnected }: {
38  roomId: string
39  onConnected: () => void
40}) {
41  const handleConnected = useEffectEvent(onConnected)
42 
43  useEffect(() => {
44    const connection = createConnection(roomId)
45    connection.on('connected', handleConnected)
46    connection.connect()
47 
48    return () => connection.disconnect()
49  }, [roomId])
50}
51```
52 
53Reference: [React useEffectEvent: Effect Event in deps](https://react.dev/reference/react/useEffectEvent#effect-event-in-deps)
54