RAF による mousemove 最適化の要点

let rafId: number | null = null

element.addEventListener('mousemove', (event) => {
    // 座標を取得
    const coord = getCoordinate(event)
    
    // RAF がすでにスケジュール済みならスキップ
    if (rafId !== null) return
    
    // 次フレームで描画をスケジュール
    rafId = requestAnimationFrame(() => {
        render(coord)  // 描画処理
        rafId = null
    })
})

// ❌ 危険な実装
let start: Coord | null = null

mousemove: rafId = requestAnimationFrame(() => {
    setSelection(start, end)  // start が null の可能性
})

mouseup: start = null  // RAF 実行前にリセット

mousemove: 
    const capturedStart = start
    const capturedEnd = coord
    
    rafId = requestAnimationFrame(() => {
        if (!capturedStart) return  // 防御的チェック
        setSelection(capturedStart, capturedEnd)
    })

mouseup:
    if (rafId !== null) {
        cancelAnimationFrame(rafId)  // 未実行の RAF をキャンセル
        rafId = null
    }
    start = null