Как реализовать компонент-секундомер, который обновляется раз в секунду?

Секундомер можно сделать “простым” (приблизительным) и “более точным” (через реальное время).

Вариант 1: простой секундомер (инкремент раз в секунду)

Идея простая: раз в 1000 мс увеличиваем счётчик.

import { useEffect, useState } from "react";

export function Stopwatch() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = window.setInterval(() => {
      setSeconds((s) => s + 1);
    }, 1000);

    return () => window.clearInterval(id);
  }, []);

  return <div>{seconds}s</div>;
}

1. Почему используется setSeconds((s) => s + 1)

   • это защищает от “устаревшего значения” в замыкании и работает стабильно.

Вариант 2: более точный секундомер (меньше дрейфа)

Интервалы в браузере могут “плыть” (вкладка неактивна, нагрузка, таймеры троттлятся). Поэтому можно хранить время старта и вычислять прошедшее время от Date.now().

import { useEffect, useRef, useState } from "react";

export function StopwatchAccurate() {
  const startRef = useRef<number>(Date.now());
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = window.setInterval(() => {
      const diffMs = Date.now() - startRef.current;
      setSeconds(Math.floor(diffMs / 1000));
    }, 1000);

    return () => window.clearInterval(id);
  }, []);

  return <div>{seconds}s</div>;
}

1. Что даёт useRef

   • значение startRef.current сохраняется между рендерами и не вызывает ререндер само по себе.

Вывод

Для простых UI-задач достаточно инкремента раз в секунду, но для “настоящего” секундомера лучше считать секунды от реального времени, чтобы таймер меньше “уезжал”.