Digital ClockLoading saved progress…

Digital Clock

Build a digital clock that shows the current time and ticks every second. It's the canonical "side effect on a timer" component: store the current time in state, start an interval on mount that refreshes it, and clear that interval on unmount. The display is just the time formatted as HH:MM:SS.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

An HH:MM:SS display that advances once per second.

Examples

9:05:03 -> "09:05:03"   (each part zero-padded to two digits)
ticks every second; on unmount the interval is cleared (no leak)
derive from a Date: getHours(), getMinutes(), getSeconds()

Notes

  • Time in state. Keep a Date (or the formatted string); re-render on each tick.
  • Interval on mount, cleared on unmount. setInterval(…, 1000) in an effect with []; return clearInterval.
  • Zero-pad each part. padStart(2, '0') so 9 -> "09".
  • Out of scope. Time zones, 12-hour AM/PM, milliseconds — local 24-hour HH:MM:SS here.
Loading editor…
Loading preview…