use-pausable-timeout

description.md

This is a React hook that creates a timeout, and provides functions for pausing, resuming, and resetting that timeout.

use-pausable-timeout.js

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

const getInitialState = (delay, running) => ({
  running,
  startedAt: +new Date(),
  timeRemaining: delay
})

export const usePausableTimeout = (callback, delay, running = true) => {
  const savedCallback = useRef()

  useEffect(() => {
    savedCallback.current = () => {
      callback()
    }
  }, [callback])

  const [timerState, setTimerState] = useState(getInitialState(delay, running))

  const pause = useCallback(() => {
    const now = +new Date()
    setTimerState({
      running: false,
      startedAt: null,
      timeRemaining: timerState.timeRemaining - (now - timerState.startedAt)
    })
  }, [timerState])

  const run = useCallback(() => {
    const now = +new Date()
    setTimerState({
      running: true,
      startedAt: now,
      timeRemaining: timerState.timeRemaining
    })
  }, [timerState])

  const reset = useCallback(() => {
    setTimerState(getInitialState(delay, running))
  }, [delay, running])

  useEffect(() => {
    if (timerState.running == true) {
      // set the timeout
      const timeout = setTimeout(
        savedCallback.current,
        timerState.timeRemaining
      )
      return () => {
        // clear the timeout if this effect is cleaned up
        clearTimeout(timeout)
      }
    }
  }, [timerState])

  return [pause, run, reset]
}