Cursor rule

1---
2alwaysApply: false
3---
4 
5## Deduplicate Global Event Listeners
6 
7Use `useSWRSubscription()` to share global event listeners across component instances.
8 
9**Incorrect (N instances = N listeners):**
10 
11```tsx
12function useKeyboardShortcut(key: string, callback: () => void) {
13  useEffect(() => {
14    const handler = (e: KeyboardEvent) => {
15      if (e.metaKey && e.key === key) {
16        callback()
17      }
18    }
19    window.addEventListener('keydown', handler)
20    return () => window.removeEventListener('keydown', handler)
21  }, [key, callback])
22}
23```
24 
25When using the `useKeyboardShortcut` hook multiple times, each instance will register a new listener.
26 
27**Correct (N instances = 1 listener):**
28 
29```tsx
30import useSWRSubscription from 'swr/subscription'
31 
32// Module-level Map to track callbacks per key
33const keyCallbacks = new Map<string, Set<() => void>>()
34 
35function useKeyboardShortcut(key: string, callback: () => void) {
36  // Register this callback in the Map
37  useEffect(() => {
38    if (!keyCallbacks.has(key)) {
39      keyCallbacks.set(key, new Set())
40    }
41    keyCallbacks.get(key)!.add(callback)
42 
43    return () => {
44      const set = keyCallbacks.get(key)
45      if (set) {
46        set.delete(callback)
47        if (set.size === 0) {
48          keyCallbacks.delete(key)
49        }
50      }
51    }
52  }, [key, callback])
53 
54  useSWRSubscription('global-keydown', () => {
55    const handler = (e: KeyboardEvent) => {
56      if (e.metaKey && keyCallbacks.has(e.key)) {
57        keyCallbacks.get(e.key)!.forEach(cb => cb())
58      }
59    }
60    window.addEventListener('keydown', handler)
61    return () => window.removeEventListener('keydown', handler)
62  })
63}
64 
65function Profile() {
66  // Multiple shortcuts will share the same listener
67  useKeyboardShortcut('p', () => { /* ... */ }) 
68  useKeyboardShortcut('k', () => { /* ... */ })
69  // ...
70}
71```
72