弱点補強: React Hooks アンチパターン — useEffect依存配列無し+cleanup無しでsetIntervalが積み上がりアンマウント後もリクエスト継続→[campaignId]依存配列+clearInterval/AbortControllerで解決 × setHistory([...history,data])のクロージャがstale closureで更新消失→関数型setState(prev => ...)で解決 × isOverThresholdをuseState+useEffectで複製し1レンダー遅延→statsとalertThresholdからuseMemoで直接計算 × onThresholdChangeが毎レンダー新規インライン関数でReact.memoが機能不全→useCallbackで参照安定化 × fetchにリクエスト順序保証がなくrace condition→latestRequestIdによる最新応答ガード × エラーハンドリング無しで未処理rejection→エラー状態表示を追加（MOps 販促システムチーム CampaignLiveWidget Next.js 15 App Router Bad→Good 7点）

📋 コピー"use client";

import { useState, useEffect, useMemo, useCallback, useRef } from "react";
import { StatsChart } from "./StatsChart";
import { Alert } from "./Alert";

/** ポーリング間隔(ms)。3秒ごとにキャンペーンのライブ指標を取得する。 */
const POLL_INTERVAL_MS = 3000;

interface LiveStats {
  orders: number;
  revenue: number;
  couponUsage: number;
}

interface CampaignLiveWidgetProps {
  /** 表示対象のキャンペーンID。切り替わったらポーリング先も切り替える。 */
  campaignId: string;
}

/**
 * キャンペーンのライブ指標（注文数/売上/クーポン使用数）を3秒間隔でポーリングし、
 * 閾値超過時にアラートを表示するウィジェット。
 *
 * @param props.campaignId - 監視対象のキャンペーンID
 */
export function CampaignLiveWidget({ campaignId }: CampaignLiveWidgetProps) {
  const [stats, setStats] = useState<LiveStats | null>(null);
  const [history, setHistory] = useState<LiveStats[]>([]);
  const [alertThreshold, setAlertThreshold] = useState(1000);
  const [error, setError] = useState<string | null>(null);

  // 同一マウント中に発行したポーリングリクエストへ連番を振り、
  // 「一番最後に発行したリクエストの応答だけを反映する」ためのガード（問題⑥の解決）
  const latestRequestId = useRef(0);

  useEffect(() => {
    // campaignIdが変わるたびにhistory/errorをリセットし、
    // 前のキャンペーンのデータが新しいキャンペーンの表示に混ざらないようにする
    setHistory([]);
    setError(null);

    const controller = new AbortController();

    const timer = setInterval(() => {
      const requestId = ++latestRequestId.current;

      fetch(`/api/campaigns/${campaignId}/live-stats`, { signal: controller.signal })
        .then((res) => {
          if (!res.ok) throw new Error(`live-stats fetch failed: ${res.status}`);
          return res.json() as Promise<LiveStats>;
        })
        .then((data) => {
          // 自分より新しいリクエストが既に発行済みなら、遅れて届いた古い応答は捨てる（問題⑥の解決）
          if (requestId !== latestRequestId.current) return;
          setStats(data);
          // クロージャ内のstateを直接参照せず、関数型更新で常に最新のstateへ積む（問題③の解決）
          setHistory((prev) => [...prev, data]);
          setError(null);
        })
        .catch((err: unknown) => {
          if (err instanceof DOMException && err.name === "AbortError") return; // cleanup由来のabortは無視
          setError(err instanceof Error ? err.message : "unknown error"); // 問題⑦の解決
        });
    }, POLL_INTERVAL_MS);

    // アンマウント時・campaignId変更時に必ずタイマーとインフライトリクエストを止める（問題①②の解決）
    return () => {
      clearInterval(timer);
      controller.abort();
    };
  }, [campaignId]); // 依存配列を明示し、campaignId変更時だけ再購読する（問題①の解決）

  // isOverThresholdをstateとして複製せず、statsとalertThresholdから直接計算する（問題④の解決）
  const isOverThreshold = useMemo(
    () => stats !== null && stats.orders > alertThreshold,
    [stats, alertThreshold]
  );

  // onThresholdChangeの参照を安定させ、StatsChart(React.memo)の不要な再レンダーを防ぐ（問題⑤の解決）
  const handleThresholdChange = useCallback((value: number) => {
    setAlertThreshold(value);
  }, []);

  return (
    <div className="campaign-live-widget">
      {error && <p role="alert">データ取得に失敗しました: {error}</p>}
      <StatsChart data={history} onThresholdChange={handleThresholdChange} />
      {isOverThreshold && <Alert message="注文数が閾値を超えました" />}
    </div>
  );
}