Reactのクリーンアップ処理を行わないと大変になることがわかる重要性がわかるデモアプリ

クリーンアップ処理の必要性がいまいちわからない

以下はクリーンアップ処理をせずタイマーを10万個単位で追加するデモです。
実際はこんなことにはならないと思いますが。

import React, { useState, useEffect, useCallback } from 'react';
const MassiveMemoryLeakDemo = () => {
  const [timerCount, setTimerCount] = useState(0);
  const [memoryUsage, setMemoryUsage] = useState(0);
  const [isAdding, setIsAdding] = useState(false);
  // メモリ使用量を更新する関数
  const updateMemoryUsage = useCallback(() => {
    if (window.performance && window.performance.memory) {
      setMemoryUsage(Math.round(window.performance.memory.usedJSHeapSize / (1024 * 1024)));
    }
  }, []);
  // タイマーを追加する関数
  const addMassiveTimers = useCallback(() => {
    setIsAdding(true);
    const startTime = performance.now();
    // タイマーを一括で追加
    for (let i = 0; i < 100000; i++) {
      setInterval(() => {
        // 空の関数
      }, 1000000); // 非常に長い間隔を設定して、実際の処理回数を減らす
    }
    setTimerCount(prevCount => prevCount + 100000);
    updateMemoryUsage();
    setIsAdding(false);
    const endTime = performance.now();
    console.log(`100,000 タイマーの追加にかかった時間: ${endTime - startTime} ミリ秒`);
  }, [updateMemoryUsage]);
  // メモリ使用量を定期的に更新
  useEffect(() => {
    const memoryUpdateInterval = setInterval(updateMemoryUsage, 1000);
    return () => clearInterval(memoryUpdateInterval);
  }, [updateMemoryUsage]);
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">大規模メモリリークデモ</h1>
      <button 
        onClick={addMassiveTimers}
        disabled={isAdding}
        className="bg-red-500 text-white px-4 py-2 rounded mb-4 disabled:bg-red-300"
      >
        {isAdding ? '追加中...' : '100,000個のタイマーを追加'}
      </button>
      <p className="mb-2">追加されたタイマーの総数: {timerCount.toLocaleString()}</p>
      <p>推定メモリ使用量: {memoryUsage} MB</p>
      <p className="mt-4 text-sm text-red-600 font-bold">
        警告: このデモは意図的に大量のメモリリークを引き起こします。ブラウザのクラッシュや
        システムの不安定化を招く可能性があります。教育目的でのみ使用してください。
      </p>
    </div>
  );
};
export default MassiveMemoryLeakDemo;