React实现一个倒计时的hook

倒计时Hook

实现一个倒计时的hook，具备开始倒计时、暂停和重置功能

import { useRef, useCallback, useState, useEffect } from "react"

function useCountdown(initialSeconds) {
  const [remainingSeconds, setRemainingSeconds] = useState(initialSeconds)
  const timerRef = useRef(null)
  const [isRunning, setIsRunning] = useState(false)
  const start = useCallback(() => {
    if (remainingSeconds <= 0 || isRunning) return
    setIsRunning(true)
    timerRef.current = setInterval(() => {
      setRemainingSeconds((pre) => {
        if (pre <= 1) {
          clearInterval(timerRef.current)
          timerRef.current = null
          setIsRunning(false)
          return 0
        }
        return pre - 1
      })
    }, 1000)
  }, [isRunning, remainingSeconds])
  const pause = useCallback(() => {
    if (timerRef.current) {
      clearInterval(timerRef.current)
      timerRef.current = null
      setIsRunning(false)
    }
  }, [])
  const reset = useCallback(
    (newSeconds = initialSeconds) => {
      pause()
      setRemainingSeconds(newSeconds)
    },
    [pause, initialSeconds]
  )
  useEffect(() => {
    return () => {
      if (timerRef.current) clearInterval(timerRef.current)
    }
  }, [])
  return {
    remainingSeconds,
    isRunning,
    start,
    pause,
    reset,
  }
}

export default useCountdown