うまく動かなかったコード

これだと、停止ボタンを押してもタイマーが止まってくれない。

const TimerCard = () => {
  const [time, setTime] = useState(0)
  let timerId: NodeJS.Timer

  const stopTimer = () => {
    console.log('stop: ' + timerId)
    if (!timerId) {
      return
    }
    clearInterval(timerId)
  }

  const startTimer = () => {
    timerId = setInterval(() => {
      console.log('start: ' + timerId)
      setTime(oldVal => oldVal + 1)
    }, 1000)
  }

  return (
    <STimerCard>
      <p>{time}</p>
      <SCircleButton onClick={startTimer}>▶︎</SCircleButton>
      <SCircleButton onClick={stopTimer}>■</SCircleButton>
    </STimerCard>
  )
}

↑スタートした時のtimerIDが7、ストップを押した時のtimerIDがundefinedで異なるからクリアされないみたい。

useCallbackを使った

const TimerCard = () => {
  const [time, setTime] = useState(0)
  let timerId: NodeJS.Timer

  const stopTimer = useCallback(() => {
    console.log(timerId)
    if (!timerId) {
      return
    }
    clearInterval(timerId)
  }, [])

  const startTimer = useCallback(() => {
    console.log(timerId)
    timerId = setInterval(() => {
      setTime(oldVal => oldVal + 1)
    }, 1000)
  }, [])

  return (
    <STimerCard>
      <p>{time}</p>
      <SCircleButton onClick={startTimer}>▶︎</SCircleButton>
      <SCircleButton onClick={stopTimer}>■</SCircleButton>
    </STimerCard>
  )
}

↑ちゃんと同じIDのタイマーを操作してくれた。

眠いので続きはまた次回。。