Reactで、秒数を任意に変えられるカウントダウンタイマーを実装したい

Question

実現したいこと

Reactでカウントダウンタイマーを作りたいです。ただし、タイマーがカウントする値は、1回目、2回目、3回目では変化します。
例えば、1回目のカウントは3秒、2回目のカウントは5秒、3回目のカウントは10秒といった具合です。
画面上では、スタートを押すと、「3,2,1,0→5,4,3,2,1,0→10,9,8,7,6,5,4,3,2,1,0（自動的に止まる）」
といった表示にしたいです。
何回目のカウントで、何秒カウントするかは、コンポーネントに配列で渡すとします。

前提

ReactとTailwindcssでタイマーコンポーネントを作成しています。

発生している問題・エラーメッセージ

タイマーをスタートさせると、2回目のカウントで、3秒から5秒には切り替わるのですが、3回目のカウントで10秒に切り替わらず、5秒のカウントになってしまいます。
おそらく、タイマーのカウントが0になった時の処理が適切でないと考えています。useStateの使い方を間違えていると思うのですが、どこを修正したらよいかが分かりません。

該当のソースコード

import { useState, useRef } from "react";

const timerInfo = [3, 5, 10];

function Timer() {
  const [timerIndex, setTimerIndex] = useState(0);
  const [seconds, setSeconds] = useState(timerInfo[timerIndex]);
  const [isActive, setIsActive] = useState(false);
  const countRef = useRef(null);

  const startTimer = () => {
    setIsActive(true);
    countRef.current = setInterval(() => {
      setSeconds((seconds) => {
        if (seconds <= 0) {
          if (timerIndex === timerInfo.length) {
            resetTimer();
            return 0;
          } else {
            updateTimer();
            const newTimerIndex = timerIndex + 1;
            return timerInfo[newTimerIndex];
          }
        } else {
          return seconds - 1;
        }
      });
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(countRef.current);
    setIsActive(false);
  };

  const updateTimer = () => {
    clearInterval(countRef.current);
    const newTimerIndex = timerIndex + 1;
    setTimerIndex((timerIndex) => timerIndex + 1);
    startTimer();
  };

  const resetTimer = () => {
    clearInterval(countRef.current);
    setIsActive(false);
    setTimerIndex(0);
  };

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <div className="text-6xl font-bold">{seconds}</div>
      <div className="flex mt-5">
        <button
          className={`px-4 py-2 font-bold text-white ${
            isActive ? "bg-red-600" : "bg-green-600"
          } mr-2`}
          onClick={isActive ? stopTimer : startTimer}
        >
          {isActive ? "ストップ" : "スタート"}
        </button>
        <button
          className="px-4 py-2 font-bold text-white bg-gray-600"
          onClick={resetTimer}
        >
          リセット
        </button>
      </div>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <h1 className="text-orange-400">タイマーアプリ</h1>
      <div>
        <Timer />
      </div>
    </div>
  );
}

export default App;

Comments

[FKM]

フラグの切り換えでメソッドを制御しているようですが、一度フラグが切り換わったら、切り換わりっぱなしなんじゃないでしょうか。

Answer 1

2つ原因があったようです。

原因１：子コンポーネントでフックを制御しても、ステートは更新されない。

useStateフックを子コンポーネントで制御させているのが気になった（動くかどうか検証した結果、動きませんでした）ので、親コンポーネントにフックとメソッドを移動させたところ、useStateフックで制御された値は更新されていきました。

このように答えている人もいるようです。
React Hook : Send data from child to parent component

You can create a method in your parent component, pass it to child component and call it from props every time child's state changes, keeping the state in child component.

これを読む限り、「子コンポーネントはステートを保持したままとなります」だそうです。

原因２：setInterval直下のsetTimerIndex内でインラインメソッドを実行する必要がある。

setInterval直下で setTimerIndexを実行すれば、希望通りの動きを実現できます。

[React] setInterval()の中でsetState()を使う

ここの実例を見ると、あくまで同一setIntervalの間で制御していますが、このシステムの場合一旦、returnで返しているために、毎回useStateで制御されたtimerIndexが初期値に戻ってしまうようです。

書き換えてみた

以下のコードはネタバレとなるので、見たい場合のみご参照ください。

import { useState, useRef,useEffect,useMemo } from "react";

//子コンポーネント
function Timer(props) {
  const {seconds,isActive,startTimer,stopTimer,resetTimer} = props
  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <div className="text-6xl font-bold">{seconds}</div>
      <div className="flex mt-5">
        <button
          className={`px-4 py-2 font-bold text-white ${
            isActive ? "bg-red-600" : "bg-green-600"
          } mr-2`}
          onClick={isActive ? stopTimer : startTimer}
        >
          {isActive ? "ストップ" : "スタート"}
        </button>
        <button
          className="px-4 py-2 font-bold text-white bg-gray-600"
          onClick={resetTimer}
        >
          リセット
        </button>
      </div>
    </div>
  );
}

//親コンポーネントでないとフックはうまく起動しない
function App() {
  const timerInfo = [3, 5, 10];
  const [timerIndex, setTimerIndex] = useState(0);
  const [seconds, setSeconds] = useState(null);
  const [isActive, setIsActive] = useState(false);
  const countRef = useRef(null);
  const initialTimer = useMemo(()=>{
     return timerInfo[timerIndex]
  },[tiimerInfo,timerIndex])
  useEffect(()=>{
    setSeconds(initialTimer)
  },[initialTimer])
  const startTimer = () => {
    setIsActive(true);
    countRef.current = setInterval(() => {
      setSeconds((seconds) => {
        if (seconds <= 0) {
          if (timerIndex === timerInfo.length) {
            resetTimer();
            return 0;
          } else {
            updateTimer();
            console.log("Before:"+timerIndex)
            setTimerIndex(prevIndex => prevIndex + 1) //setInterval直下に移動する
            console.log("After:"+timerIndex)
            return timerInfo[timerIndex];
          }
        } else {
          return seconds - 1;
        }
      });
    }, 500);
  };

  const stopTimer = () => {
    clearInterval(countRef.current);
    setIsActive(false);
  };

  const updateTimer = () => {
    clearInterval(countRef.current);
    startTimer();
  };

  const resetTimer = () => {
    clearInterval(countRef.current);
    setIsActive(false);
    setTimerIndex(0);
  };
  return (
    <div className="App">
      <h1 className="text-orange-400">タイマーアプリ</h1>
      <div>
        <Timer 
          seconds={seconds} 
          isActive={isActive} 
          startTimer={()=> startTimer()}
          stopTimer={()=> stopTimer()}
          resetTimer={()=> resetTimer()}
          />
      </div>
    </div>
  );
}

export default App;

Answer 2

回答ありがとうございます。自分ではコードの書き換えまで出来ず、教えていただいたコードを動かしてみた結果、意図した動作になりました。
原因が2つあったということですが、どちらも検討もつきませんでした。コードを動かしながらstateの状態を確認して、勉強していきたいと思います。
ありがとうございました。