Reactで、残り時間を数えるカウントダウンタイマーを作る方法

import { useEffect, useState } from 'react';

// 比べるための書き方：1秒ごとに残りの秒数から1を引く
export function NaiveCountdown({ seconds: initial, running }: { seconds: number; running: boolean }) {
  const [seconds, setSeconds] = useState(initial);

  useEffect(() => {
    if (!running) return;
    const id = setInterval(() => setSeconds((s) => Math.max(0, s - 1)), 1000);
    return () => clearInterval(id);
  }, [running]);

  return <p className="naive">{seconds}</p>;
}

開始から 2.2秒: 1を引く: 58秒 / 終わる時刻から計算: 58秒
3秒ふさいだ直後（開始から 5.2秒）: 1を引く: 57秒 / 終わる時刻から計算: 55秒
開始から 7.2秒: 1を引く: 55秒 / 終わる時刻から計算: 53秒

import { useEffect, useState } from 'react';

type Timer =
  | { status: 'idle' | 'paused' | 'finished'; remaining: number }
  | { status: 'running'; endAt: number };

export function useCountdown(duration: number, tickMs = 250) {
  const [timer, setTimer] = useState<Timer>({ status: 'idle', remaining: duration });
  const [now, setNow] = useState(() => Date.now());

  useEffect(() => {
    if (timer.status !== 'running') return;
    const id = setInterval(() => {
      const t = Date.now();
      if (t >= timer.endAt) setTimer({ status: 'finished', remaining: 0 });
      else setNow(t);
    }, tickMs);
    return () => clearInterval(id);
  }, [timer, tickMs]);

  // 動いている間は、終わる時刻と現在時刻の差が残り時間
  const remaining = timer.status === 'running' ? Math.max(0, timer.endAt - now) : timer.remaining;

  const start = () => {
    if (timer.status === 'running' || timer.status === 'finished') return;
    const t = Date.now();
    setNow(t);
    setTimer({ status: 'running', endAt: t + timer.remaining });
  };
  const pause = () => {
    if (timer.status !== 'running') return;
    setTimer({ status: 'paused', remaining: Math.max(0, timer.endAt - Date.now()) });
  };
  const reset = () => setTimer({ status: 'idle', remaining: duration });

  return { status: timer.status, remaining, start, pause, reset };
}

// 残りのミリ秒を「分:秒」にする。秒は切り上げる
export function formatTime(ms: number): string {
  const total = Math.ceil(ms / 1000);
  const m = Math.floor(total / 60);
  const s = total % 60;
  return `${m}:${String(s).padStart(2, '0')}`;
}

残りミリ秒  切り上げ  切り捨て
180000     3:00     3:00
179999     3:00     2:59
179001     3:00     2:59
179000     2:59     2:59
 60000     1:00     1:00
 59999     1:00     0:59
  1000     0:01     0:01
   999     0:01     0:00
     1     0:01     0:00
     0     0:00     0:00

再開から 0.25秒: tickMs=250 の表示が 0:07 に変わった
再開から 1.00秒: tickMs=1000 の表示が 0:07 に変わった
再開から 1.25秒: tickMs=250 の表示が 0:06 に変わった
再開から 2.00秒: tickMs=1000 の表示が 0:06 に変わった

import { formatTime } from './formatTime';
import { useCountdown } from './useCountdown';

export function Countdown({ duration }: { duration: number }) {
  const { status, remaining, start, pause, reset } = useCountdown(duration);

  return (
    <div>
      <p role="timer" className="time">{formatTime(remaining)}</p>
      {status === 'finished' && <p className="done">時間です</p>}
      {status === 'running' ? (
        <button onClick={pause}>一時停止</button>
      ) : (
        <button onClick={start} disabled={status === 'finished'}>
          {status === 'paused' ? '再開' : '開始'}
        </button>
      )}
      <button onClick={reset}>リセット</button>
    </div>
  );
}

開いた直後       : 0:10 [開始 リセット]
「開始」を押した (0.00秒): 0:10 [一時停止 リセット]
開始から 1.00秒: 0:09 [一時停止 リセット]
開始から 2.00秒: 0:08 [一時停止 リセット]
開始から 3.00秒: 0:07 [一時停止 リセット]
「一時停止」を押した (3.50秒): 0:07 [再開 リセット]
「再開」を押した (8.50秒): 0:07 [一時停止 リセット]
開始から 9.00秒: 0:06 [一時停止 リセット]
開始から 10.00秒: 0:05 [一時停止 リセット]
開始から 11.00秒: 0:04 [一時停止 リセット]
開始から 12.00秒: 0:03 [一時停止 リセット]
開始から 13.00秒: 0:02 [一時停止 リセット]
開始から 14.00秒: 0:01 [一時停止 リセット]
開始から 15.00秒: 0:00 時間です [開始(押せない) リセット]
「リセット」を押した (16.50秒): 0:10 [開始 リセット]