【React】clearTimeoutを用いたループ処理の停止ができない

Question

前提・実現したいこと

reactを用いてストップウォッチを作成したい

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

時間のカウントアップはできるが

clearTimeoutを用いたループ処理の停止ができない

エラーメッセージ：なし

該当のソースコード

import React from 'react';

class App extends React.Component{
  

  constructor(props){
    super(props);
    this.state = {timer:'00.00.000',
    }
  }
  render(){
    let startTime;
    let timeoutId;

    const countUp =() => {
      const d = new Date(Date.now() - startTime);
      const m = String(d.getMinutes()).padStart(2,'0');
      const s = String(d.getSeconds()).padStart(2,'0');
      const ms = String(d.getMilliseconds()).padStart(3,'0');
      this.setState({timer:`${m}.${s}.${ms}`});
      timeoutId = setTimeout(()=>{
        countUp();
      },10);
    }

  return (
    <div>
      <div>{this.state.timer}</div>
      <button onClick={()=>{
          startTime = Date.now();
          countUp();
      }}>start</button>
      <button onClick={()=>{
        clearTimeout(timeoutId);
        }}>stop</button>
      <button onClick={()=>{
        this.setState({timer:'00.00.000'});
      }}>reset</button>
    </div>
  );}
}

export default App;

Answer 1

console.logでデバッグすればわかりますが、countUpで使われるtimeoutIDとstopボタンのonClickコールバックで使われているtimeoutIDは別のものを参照しています。

詳細な仕組みを説明するのは少し難しい（私も正確な説明ができるかわからない）のでしませんが、少なくともrender関数内で新しく変数を定義するのは絶対に避けるべきです。
render関数は再レンダリングの際に毎回呼び出され、関数内で定義した変数は再レンダリングごとに定義しなおされます。

クラスコンポーネントで値を保持したい場合、メンバ変数もしくはstateを使いましょう。
今回は再レンダリングに寄与する値ではないので、メンバ変数でよいと思います。

---

以下コードですが、render関数の見通しを良くするためクリック処理は関数にまとめています。

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { timer: "00.00.000" };
    this.startTime = 0;
    this.timeoutId = null;
  }

  countUp = () => {
    const d = new Date(Date.now() - this.startTime);
    const m = String(d.getMinutes()).padStart(2, "0");
    const s = String(d.getSeconds()).padStart(2, "0");
    const ms = String(d.getMilliseconds()).padStart(3, "0");
    this.setState({
      timer: `${m}.${s}.${ms}`
    });

    this.timeoutId = setTimeout(() => {
      this.countUp();
    }, 10);
  };

  countStart = () => {
    // timerの重複設定の回避
    if (this.timeoutId) return;
    this.startTime = Date.now();
    this.countUp();
  };

  countStop = () => {
    clearTimeout(this.timeoutId);
    this.timeoutId = null;
  };

  countReset = () => {
    this.setState({ timer: "00.00.000" });
  };

  render() {
    return (
      <div>
        <div>{this.state.timer}</div>
        <button onClick={this.countStart}>start</button>
        <button onClick={this.countStop}>stop</button>
        <button onClick={this.countReset}>reset</button>
      </div>
    );
  }
}

export default App;

Comments

[yamamegumi]

わかりやすい回答ありがとうございます！
確かにconsole.logで確認したところ、別のログが確認でき、
ループ処理の停止ができました。
アドバイスありがとうございます！
ちなみにですが添削していただいたコードの
// timer後片付け
componentWillUnmount() {
clearInterval(this.timeoutId);
}
この部分がどのように機能しているかわからず（setInterval()は使用していないはず？）、
こちらご教授いただければ幸いです。

[k_a]

すみません。完全に私の間違いです。Intervalを多く使用しているので、何も考えず入れてしまいました。
今回は必要ありません。

[yamamegumi]

迅速なご回答感謝致します！