203個のCanvas/DOMコンポーネントで踏んだバグ Top 10 — 実データから見えたパターン

// ❌ MazeRunner.tsx — リーク版
function MazeRunner() {
  const [timeLeft, setTimeLeft] = useState(60)

  useEffect(() => {
    const id = setInterval(() => {
      setTimeLeft((t) => t - 1)
    }, 1000)
    // cleanup忘れ → アンマウント後もsetStateが走り続ける
  }, [])
}

// ✅ useRefでタイマーID管理 + cleanup関数で確実にクリア
function MazeRunner() {
  const [timeLeft, setTimeLeft] = useState(60)
  const timerRef = useRef<ReturnType<typeof setInterval>>(null)

  useEffect(() => {
    timerRef.current = setInterval(() => {
      setTimeLeft((t) => t - 1)
    }, 1000)

    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current)
      }
    }
  }, [])
}

// ❌ Kalimba.tsx — ガードなし
function Kalimba() {
  const audioCtx = useRef(new AudioContext())

  function playNote(freq: number) {
    const osc = audioCtx.current.createOscillator()
    osc.frequency.value = freq
    osc.connect(audioCtx.current.destination)
    osc.start()
  }
}

// ✅ try-catchでラップ + suspended状態のresume()
function Kalimba() {
  const audioCtx = useRef<AudioContext | null>(null)

  function getAudioContext(): AudioContext | null {
    if (!audioCtx.current) {
      try {
        audioCtx.current = new AudioContext()
      } catch {
        console.warn('AudioContext not available')
        return null
      }
    }
    if (audioCtx.current.state === 'suspended') {
      audioCtx.current.resume().catch(() => {})
    }
    return audioCtx.current
  }

  function playNote(freq: number) {
    const ctx = getAudioContext()
    if (!ctx) return

    const osc = ctx.createOscillator()
    osc.frequency.value = freq
    osc.connect(ctx.destination)
    osc.start()
  }
}

// ❌ Match3.tsx — モジュールレベルのカウンター
let nextId = 0

function createTile(color: string) {
  return { id: nextId++, color }
}

function Match3() {
  const [tiles, setTiles] = useState(() =>
    Array.from({ length: 64 }, () => createTile(randomColor()))
  )
  // Strict Modeで2回実行 → IDが0-63と64-127に分裂
  // 1回目の初期化結果は破棄されるが、nextIdは128に進んでいる
}

// ✅ useRefでインスタンスレベルのカウンター
function Match3() {
  const nextId = useRef(0)

  function createTile(color: string) {
    return { id: nextId.current++, color }
  }

  const [tiles, setTiles] = useState(() =>
    Array.from({ length: 64 }, () => createTile(randomColor()))
  )
}

// ❌ Mandelbrot — 発散判定で NaN
function smoothColor(zn: number, iter: number) {
  // zn が 0 以下のとき Math.log が NaN → 全ピクセルが黒に
  const smooth = iter - Math.log(Math.log(zn)) / Math.log(2)
  return smooth
}

// ✅ 入力を安全な範囲にクランプ
function smoothColor(zn: number, iter: number) {
  const smooth = iter - Math.log2(Math.max(Math.log2(zn), 1e-10))
  return Number.isFinite(smooth) ? smooth : iter
}

// DoublePendulum — 全更新結果にガード
const newOmega1 = computeOmega1(theta1, theta2, omega1, omega2)
if (!Number.isFinite(newOmega1)) {
  // 発散した場合は前フレームの値を維持
  return prevState
}

// ❌ ReactionDiffusion.tsx
function ReactionDiffusion() {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const canvas = canvasRef.current!
    const ctx = canvas.getContext('2d')!
    // コンテナ未ロード → width=0, height=0
    const imageData = ctx.createImageData(canvas.width, canvas.height) // 💥
  }, [])
}

// ✅ サイズのバリデーション
useEffect(() => {
  const canvas = canvasRef.current
  if (!canvas) return

  const { width, height } = canvas.getBoundingClientRect()
  const w = Math.max(1, Math.floor(width))
  const h = Math.max(1, Math.floor(height))
  canvas.width = w
  canvas.height = h

  const ctx = canvas.getContext('2d')
  if (!ctx) return

  const imageData = ctx.createImageData(w, h) // 安全
}, [])

// ❌ AudioVisualizer.tsx
function AudioVisualizer() {
  const [stream, setStream] = useState<MediaStream | null>(null)

  useEffect(() => {
    navigator.mediaDevices.getUserMedia({ audio: true }).then((s) => {
      setStream(s) // アンマウント後に実行される可能性
    })
  }, [])
}

// ✅ mountedRefでガード
function AudioVisualizer() {
  const [stream, setStream] = useState<MediaStream | null>(null)
  const mountedRef = useRef(true)

  useEffect(() => {
    mountedRef.current = true

    navigator.mediaDevices
      .getUserMedia({ audio: true })
      .then((s) => {
        if (mountedRef.current) {
          setStream(s)
        } else {
          // アンマウント済みならリソースを解放
          s.getTracks().forEach((t) => t.stop())
        }
      })
      .catch(() => {})

    return () => {
      mountedRef.current = false
    }
  }, [])
}

// ❌ ParticleField.tsx
useEffect(() => {
  let rafId: number

  function loop() {
    update()
    draw()
    rafId = requestAnimationFrame(loop)
  }
  loop()

  return () => cancelAnimationFrame(rafId)
  // ⚠️ Strict Modeで2回実行 → 1回目のcleanup後に2回目が開始
  // → 見た目上は問題ないが、2倍のCPU消費
}, [particles]) // particlesが変わるたびにループが増殖

// ✅ useCanvasGameLoop.ts に抽出
function useCanvasGameLoop(
  callback: (dt: number) => void,
  deps: unknown[] = [],
) {
  const callbackRef = useRef(callback)
  callbackRef.current = callback

  useEffect(() => {
    let rafId: number
    let lastTime = performance.now()
    let running = true

    function loop(now: number) {
      if (!running) return
      const dt = Math.min((now - lastTime) / 1000, 0.1) // 100ms上限
      lastTime = now
      callbackRef.current(dt)
      rafId = requestAnimationFrame(loop)
    }
    rafId = requestAnimationFrame(loop)

    return () => {
      running = false
      cancelAnimationFrame(rafId)
    }
  }, deps)
}

// ❌ GravityBadges.tsx
useEffect(() => {
  const handleWheel = (e: WheelEvent) => {
    applyForce(e.deltaY)
  }
  window.addEventListener('wheel', handleWheel)
  return () => window.removeEventListener('wheel', handleWheel)
}, [])

// ✅ passive: true を明示
useEffect(() => {
  const handleWheel = (e: WheelEvent) => {
    applyForce(e.deltaY)
  }
  window.addEventListener('wheel', handleWheel, { passive: true })
  return () => window.removeEventListener('wheel', handleWheel)
}, [])

/* Canvasにtouch-actionを指定してブラウザのデフォルト操作を抑制 */
canvas.interactive {
  touch-action: none;
}

// ❌ ColorPicker.tsx
async function copyColor(hex: string) {
  await navigator.clipboard.writeText(hex)
  showToast('Copied!')
}

// ✅ optional chaining + try-catch + fallback
async function copyColor(hex: string) {
  try {
    await navigator.clipboard?.writeText(hex)
    showToast('Copied!')
  } catch {
    // fallback: 非表示のinputにコピー
    const input = document.createElement('input')
    input.value = hex
    input.style.position = 'fixed'
    input.style.opacity = '0'
    document.body.appendChild(input)
    input.select()
    document.execCommand('copy')
    document.body.removeChild(input)
    showToast('Copied!')
  }
}

// ❌ 復帰時にdt=5.0が入る
function loop(now: number) {
  const dt = (now - lastTime) / 1000
  lastTime = now
  physics.step(dt) // dt=5.0 → ボールが画面外に飛ぶ
  requestAnimationFrame(loop)
}

// ✅ dtに上限を設定 + visibilitychangeでリセット
function loop(now: number) {
  const dt = Math.min((now - lastTime) / 1000, 1 / 30) // 最大33ms
  lastTime = now
  physics.step(dt)
  requestAnimationFrame(loop)
}

// visibilitychangeでlastTimeをリセット
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    lastTime = performance.now()
  }
})