hooks useElapsedMs.ts

0% Statements 0/20

0% Branches 0/1

0% Functions 0/1

0% Lines 0/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  'use client'

import { useEffect, useState } from 'react'

/**
 * Tracks elapsed time since `startedAt` (unix ms), re-rendering on each tick.
 * Returns `null` when `startedAt` is null.
 */
export function useElapsedMs(startedAt: number | null, tickMs = 1000): number | null {
  const [now, setNow] = useState<number>(() => Date.now())

  useEffect(() => {
    if (startedAt == null) return
    setNow(Date.now())
    const id = setInterval(() => setNow(Date.now()), tickMs)
    return () => clearInterval(id)
  }, [startedAt, tickMs])

  return startedAt == null ? null : now - startedAt
}