Cursor rule

1---
2alwaysApply: false
3---
4 
5## Use Passive Event Listeners for Scrolling Performance
6 
7Add `{ passive: true }` to touch and wheel event listeners to enable immediate scrolling. Browsers normally wait for listeners to finish to check if `preventDefault()` is called, causing scroll delay.
8 
9**Incorrect:**
10 
11```typescript
12useEffect(() => {
13  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
14  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
15  
16  document.addEventListener('touchstart', handleTouch)
17  document.addEventListener('wheel', handleWheel)
18  
19  return () => {
20    document.removeEventListener('touchstart', handleTouch)
21    document.removeEventListener('wheel', handleWheel)
22  }
23}, [])
24```
25 
26**Correct:**
27 
28```typescript
29useEffect(() => {
30  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
31  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
32  
33  document.addEventListener('touchstart', handleTouch, { passive: true })
34  document.addEventListener('wheel', handleWheel, { passive: true })
35  
36  return () => {
37    document.removeEventListener('touchstart', handleTouch)
38    document.removeEventListener('wheel', handleWheel)
39  }
40}, [])
41```
42 
43**Use passive when:** tracking/analytics, logging, any listener that doesn't call `preventDefault()`.
44 
45**Don't use passive when:** implementing custom swipe gestures, custom zoom controls, or any listener that needs `preventDefault()`.
46