Code ReviewAdvanced~20 min

Review: Memory Leaks

typescriptreactmemory-leakperformance

Code Review Task

Please review the following React + TypeScript code.

Background

This is a component that updates data in real-time. Identify code that may cause memory leaks.

Review Points

useEffect cleanup
Event listener removal
Timer management
Canceling asynchronous operations

Your Answer

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+クリックで範囲選択）

Review Summary

Minimum 100 characters required

Approval Decision

Overall Severity

Add comments and enter at least 100 characters in the summary

Model Answer

Submit your answer or click "Show" to view the model answer.