問題一覧に戻る
中級副作用
問題42: タイマー処理

setIntervalとsetTimeoutの使い方とクリーンアップの重要性を学びます。タイマーを適切にクリアしないとメモリリークが発生する可能性があります。Reactコンポーネントがアンマウントされた後もタイマーが動き続けることを防ぐため、必ずクリーンアップ関数でタイマーをクリアする必要があります。この問題では、カウントダウンタイマーを実装しながら、タイマーの適切な管理方法を身につけます。

import React, { useState, useEffect } from 'react';

function Countdown() {
  const [count, setCount] = useState(10);
  const [active, setActive] = useState(false);

  useEffect(() => {
    if (!active || count === 0) return;

    // タイマーを設定
    const timer = (() => {
      setCount(c => c - 1);
    }, 1000);

    // タイマーをクリーンアップ
    return () => (timer);
  }, [active, count]);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setActive(!active)}>
        {active ? "停止" : "開始"}
      </button>
    </div>
  );
}

export default Countdown;
···