src/lib/hooks/useTimer.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import * as React from 'react'

/**
 * Helper hook to run persistent timers on views
 */
export function useTimer(time: number, handler: () => void) {
  const timer = React.useRef(undefined)

  // function to restart the timer
  const reset = React.useCallback(() => {
    if (timer.current) {
      clearTimeout(timer.current)
    }
    timer.current = setTimeout(handler, time)
  }, [time, timer, handler])

  // function to cancel the timer
  const cancel = React.useCallback(() => {
    if (timer.current) {
      clearTimeout(timer.current)
      timer.current = undefined
    }
  }, [timer])

  // start the timer immediately
  React.useEffect(() => {
    reset()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return [reset, cancel]
}