コードレビュー上級約20分

レビュー: メモリリーク

typescriptreactmemory-leakperformance

コードレビュー課題

以下のReact + TypeScriptコードをレビューしてください。

背景

リアルタイムでデータを更新するコンポーネントです。メモリリークの可能性があるコードを特定してください。

レビュー観点

useEffectのクリーンアップ
イベントリスナーの削除
タイマーの管理
非同期処理のキャンセル

あなたの回答

LiveDataDisplay.tsxtypescript

import React, { useEffect, useState } from 'react';
 
interface LiveData {
  timestamp: number;
  value: number;
}
 
function LiveDataDisplay() {
  const [data, setData] = useState<LiveData | null>(null);
  const [isOnline, setIsOnline] = useState(true);
 
  useEffect(() => {
    // 5秒ごとにデータを取得
    const intervalId = setInterval(async () => {
      const response = await fetch('/api/live-data');
      const newData = await response.json();
      setData(newData);
    }, 5000);
  }, []);
 
  useEffect(() => {
    // オンライン/オフライン検出
    window.addEventListener('online', () => setIsOnline(true));
    window.addEventListener('offline', () => setIsOnline(false));
  }, []);
 
  return (
    <div>
      <div>Status: {isOnline ? 'Online' : 'Offline'}</div>
      {data && (
        <div>
          <div>Timestamp: {data.timestamp}</div>
          <div>Value: {data.value}</div>
        </div>
      )}
    </div>
  );
}
 
export default LiveDataDisplay;

行番号をクリックしてコメントを追加（Shift+クリックで範囲選択）

レビューサマリー

最低100文字必要です

承認判定

全体の重大度

コメントを追加し、サマリーを100文字以上入力してください

模範解答

回答を送信するか、「表示する」をクリックすると模範解答が表示されます。