Claude Code Guide（zebbern）

Use Passive Event Listeners for Scrolling Performance

Add \{ 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.

Incorrect:

useEffect(() => {
  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)

  document.addEventListener("touchstart", handleTouch)
  document.addEventListener("wheel", handleWheel)

  return () => {
    document.removeEventListener("touchstart", handleTouch)
    document.removeEventListener("wheel", handleWheel)
  }
}, [])

Correct:

useEffect(() => {
  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)

  document.addEventListener("touchstart", handleTouch, { passive: true })
  document.addEventListener("wheel", handleWheel, { passive: true })

  return () => {
    document.removeEventListener("touchstart", handleTouch)
    document.removeEventListener("wheel", handleWheel)
  }
}, [])

Use passive when: tracking/analytics, logging, any listener that doesn't call preventDefault().

Don't use passive when: implementing custom swipe gestures, custom zoom controls, or any listener that needs preventDefault().