Solution

A clock is the textbook timer effect: keep the current time in state, start a one-second interval on mount that updates it, and clear that interval on unmount. Rendering is just formatting the Date as HH:MM:SS.

The problem, in plain English

The component must re-render every second with the new time. React only re-renders when state changes, so you put the time in state and bump it on a timer. The timer is a side effect, so it lives in useEffect — created once on mount and, crucially, torn down on unmount so it doesn't keep firing (a leak). The rest is formatting: pull hours/minutes/seconds off the Date and zero-pad them.

The mental model

State: now, a Date. An effect with an empty dependency array runs once: it starts setInterval(() => setNow(new Date()), 1000) and returns () => clearInterval(id) for cleanup. Each tick sets a fresh Date, which re-renders. On render, derive hh/mm/ss via getHours/Minutes/Seconds, each padStart(2, '0'), and lay them out with colon separators.

A first attempt

A first attempt mutates a variable or starts the interval in the render body:

let now = new Date();
setInterval(() => { now = new Date(); }, 1000); // not state → no re-render; new interval each render

Reassigning a local doesn't re-render, so the display never updates. And calling setInterval during render creates a new timer on every render (and leaks them all). The fix is state for the value plus a single effect (empty deps) that owns the one interval and cleans it up.

The working solution

import { useState, useEffect } from 'react';
import './styles.css';

export default function App() {
  const [now, setNow] = useState(new Date());

  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  const pad = (n: number) => String(n).padStart(2, '0');
  const hh = pad(now.getHours());
  const mm = pad(now.getMinutes());
  const ss = pad(now.getSeconds());

  return (
    <main className="container">
      <h1>Digital Clock</h1>
      <div className="clock">
        <span className="digit">{hh}</span>
        <span className="colon">:</span>
        <span className="digit">{mm}</span>
        <span className="colon">:</span>
        <span className="digit">{ss}</span>
      </div>
    </main>
  );
}

now starts at the current time so the first paint is correct, not 00:00:00. The effect's empty deps mean the interval is created once; its cleanup clearInterval stops it on unmount (and React would re-run setup/cleanup if deps changed, but they don't). Each tick's setNow(new Date()) produces a new Date reference, guaranteeing a re-render. pad zero-fills each part, and the three digit spans plus colons render the display.

Walking through the ticks

Say it mounts at 09:05:03.

1. First render. now = new Date() ≈ 09:05:03 → hh="09", mm="05", ss="03". Display "09:05:03" immediately (no zero-flash).
2. Effect runs. setInterval starts; React stores the cleanup.
3. +1s. The interval fires setNow(new Date()) ≈ 09:05:04 → re-render → "09:05:04". This repeats every second.
4. Single-digit padding. At 9:05:09 → 9:05:10, ss goes "09" → "10"; pad keeps every part two digits.
5. Unmount. Cleanup runs clearInterval(id) — no more ticks, no leak.

Gotchas

• Value not in state. Mutating a local never re-renders. Fix: useState + setNow each tick.
• setInterval in render / no []. Stacks a new timer per render and leaks. Fix: one effect with empty deps.
• No cleanup. The interval fires after unmount → warning/leak. Fix: return () => clearInterval(id).
• Initial 00:00:00. Starting now at a blank value flashes zeros. Fix: initialize with new Date().
• Forgetting to pad. 9:5:3 looks broken and the layout jumps. Fix: padStart(2, '0').

Going further

• Sub-second accuracy. Align the interval to the next whole second, or update more often for a smoother seconds tick.
• 12-hour + AM/PM. Convert hours and append a meridiem.
• True 7-segment. Render each digit as SVG segments lit per a digit→segments map.

Alternative solutions

import { useEffect, useState } from 'react';
import './styles.css';

type ClockParts = [string, string, string];

function readClock(date: Date): ClockParts {
  const pad = (value: number) => String(value).padStart(2, '0');
  return [pad(date.getHours()), pad(date.getMinutes()), pad(date.getSeconds())];
}

export default function App() {
  const [parts, setParts] = useState<ClockParts>(() => readClock(new Date()));

  useEffect(() => {
    const timer = setInterval(() => setParts(readClock(new Date())), 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <main className="container">
      <h1>Digital Clock</h1>
      <div className="clock">
        <span className="digit">{parts[0]}</span>
        <span className="colon">:</span>
        <span className="digit">{parts[1]}</span>
        <span className="colon">:</span>
        <span className="digit">{parts[2]}</span>
      </div>
    </main>
  );
}