useTimer.js

import { useState, useRef, useEffect } from 'react'

export const useTimer = ({ initialStartTime = 0, shouldStartOnMount = false }) => {
  const [milliseconds, setMilliSeconds] = useState(0)
  const intervalRef = useRef()
  const startTime = useRef()
  const play = () => {
    if (intervalRef.current) return
    if (!startTime.current) {
      startTime.current = new Date().getTime()
    }

    intervalRef.current = setInterval(() => {
      const deltaTime = new Date().getTime() - startTime.current
      setMilliSeconds(deltaTime)
    }, 200)
  }

  const stop = () => {
    if (!intervalRef.current) return
    clearInterval(intervalRef.current)
    intervalRef.current = null
    startTime.current = null
    setMilliSeconds(0)
  }

  useEffect(() => {
    if (initialStartTime) {
      startTime.current = initialStartTime
    }
    if (shouldStartOnMount) {
      play()
    }
  }, [initialStartTime, shouldStartOnMount])

  return { milliseconds, play, stop, startTime: startTime.current }
}