こんにちは、ISSUEの寒河江です。
ISSUEでは作業管理ページにTogglのようなリアルタイムのタイマーを用意しています。

![image](https://user-images.githubusercontent.com/19757050/164722097-6de991ab-db7a-4be4-9a7e-cf29314984f1.png)

このタイマーを最初は、setIntervalを使って、stateを+1ずつカウントアップする方法を取っていました。
しかし、この方法をとると途中から秒数が遅れて行きます。理由は、ブラウザの処理速度が一定ではないことだったり、setInterval自体が秒数の正確性を担保できていないことにあります。

そこで、カウントアップする方法をやめて、
開始した時間と今の時間を毎秒出していく手法を取りました。

# 実装コード

![img](/mosaic-code.jpg)


こんにちは、ISSUEの寒河江です。
ISSUEでは作業管理ページにTogglのようなリアルタイムのタイマーを用意しています。

![image](https://user-images.githubusercontent.com/19757050/164722097-6de991ab-db7a-4be4-9a7e-cf29314984f1.png)

このタイマーを最初は、setIntervalを使って、stateを+1ずつカウントアップする方法を取っていました。
しかし、この方法をとると途中から秒数が遅れて行きます。理由は、ブラウザの処理速度が一定ではないことだったり、setInterval自体が秒数の正確性を担保できていないことにあります。

そこで、カウントアップする方法をやめて、
開始した時間と今の時間を毎秒出していく手法を取りました。

# 実装コード

```js
const [count, setCount] = useState<number>(0) # 秒数をカウントする
const timerRef = useRef(null)  # setTimeout関数を格納する

const start = () => {
  timerRef.current = setTimeout(() => {
    const defaultCount = (new Date().getTime() - startAt.getTime()) / 1000 # 差分を出す。startAtはDate型の開始時間
    setCount(defaultCount)
  }, 1000)
}

...

return (
   <Box mr={1}>
     <Typography variant="h4">
       {realtimer(count)}
     </Typography>
   </Box>
)
```


続きを読むには単価診断を受けてください（30秒）