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

以下はクリーンアップ処理をせずタイマーを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;