Notifio is a desktop app whose UI exists to show the state of a background process: which searches are being watched, when each was last checked, how long it took, and what turned up. Almost every number on screen is relative to now.

"Last check 12s ago" is a lie four seconds later. There are two ways to deal with that. One is to store the formatted string and recompute it on an event. The other is to re-render on a timer and let the formatter read the clock. We do the second one, through a hook that is twelve lines long:

/** * A clock that re-renders on an interval, so relative times and countdowns * stay honest without every component owning a timer. * * Pass `active: false` when nothing on screen is counting down: a monitor * sitting idle overnight should not be re-rendering once a second. */ export function useNow ( intervalMs = 1000 , active = true ): number { const [ now , setNow ] = useState (() => Date . now ());

useEffect (() => { if ( !…