Reactで1秒毎にカウントアップするシンプルなストップウォッチを作りたい

Question

React Hooksを使って、1秒ごとにカウントが1ずつ増えていくだけのシンプルなコンポーネントを作ってみようと思い、下記のようなコードを書いてみました。

MyTimer.tsx

import React, { useState } from 'react';

const MyTimer = () => {
  const [count, setCount] = useState(0);

  let timerId: NodeJS.Timeout;

  const countup = () => {
    setCount(count + 1);
  };

  const start = () => {
    timerId = setInterval(countup, 1000);
  };

  const stop = () => {
    clearInterval(timerId);
  };

  return (
    <div>
      <h2>My Timer</h2>
      <div>{String(count)}</div>
      <button onClick={() => start()}>スタート</button>
      <button onClick={() => stop()}>ストップ</button>
      <button onClick={() => setCount(0)}>リセット</button>
    </div>
  );
};

export default MyTimer;

useState で管理している count を setInterval で1秒毎にカウントアップしていきたいのですが、これだと思うように動きません。

【環境】
"react: "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"typescript": "^3.7.5"

どうして動かないのか、どのように改善したらよいか、教えていただけると幸いです。
よろしくお願いいたします。

Comments

[hoshi-takanori]

timerId も useState を使って管理する必要があります。

Answer 1

• countup は毎秒同じ関数が呼ばれて count の値は変わらないので、setCount の引数は関数にしましょう。
• timerId も useState を使って管理する必要があります。

 const MyTimer = () => {
   const [count, setCount] = useState(0);
-
-  let timerId: NodeJS.Timeout;
+  const [timerId, setTimerId] = useState(null);
 
   const countup = () => {
-    setCount(count + 1);
+    setCount(count => count + 1);
   };
 
   const start = () => {
-    timerId = setInterval(countup, 1000);
+    if (timerId === null) {
+      setTimerId(setInterval(countup, 1000));
+    }
   };
 
   const stop = () => {
-    clearInterval(timerId);
+    if (timerId !== null) {
+      clearInterval(timerId);
+      setTimerId(null);
+    }
   };

---

追記。MyTimer のアンマウント時にタイマーを止めることを考えると useEffect を使うべきでしょうね。

const MyTimer = () => {
  const [count, setCount] = useState(0);
  const [timer, setTimer] = useState(false);

  const countup = () => {
    setCount(count => count + 1);
  };

  useEffect(() => {
    if (timer) {
      const timerId = setInterval(countup, 1000);
      return () => clearInterval(timerId);
    }
  }, [timer]);

  return (
    <div>
      <h2>My Timer</h2>
      <div>{String(count)}</div>
      <button onClick={() => setTimer(true)}>スタート</button>
      <button onClick={() => setTimer(false)}>ストップ</button>
      <button onClick={() => setCount(0)}>リセット</button>
    </div>
  );
};

Comments

[alex77n]

なるほどです！分かりやすいご説明ありがとうございます！！

[sikaku]

上記プログラムのuseEffect関数の内容について教えていただきたいです。
if文の中で setInterval(countup,1000);
その次の行にreturn () => clearInterval(timerId);
が存在しています。
この処理についてsetIntervalが実行された直後にclearIntervalが実行され、タイマーが動いたと同時にタイマーが停止するような動きになると思いました。しかし実際に動かしてみると、そのような動きにはなりませんでした。
なぜ setIntervalが実行された後、clearIntervalは実行されず待機するのでしょうか。