Transitions로 비긴급 업데이트 처리

Overview

Mark frequent, non-urgent state updates as transitions to maintain UI responsiveness.

Impact

• Priority: MEDIUM
• Performance: maintains UI responsiveness

Examples

Incorrect (blocks UI on every scroll)

function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0)
  useEffect(() => {
    const handler = () => setScrollY(window.scrollY)
    window.addEventListener("scroll", handler, { passive: true })
    return () => window.removeEventListener("scroll", handler)
  }, [])
}

Correct (non-blocking updates)

import { startTransition } from "react"

function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0)
  useEffect(() => {
    const handler = () => {
      startTransition(() => setScrollY(window.scrollY))
    }
    window.addEventListener("scroll", handler, { passive: true })
    return () => window.removeEventListener("scroll", handler)
  }, [])
}

---

Tags: rerender, transitions, startTransition, performance