React‑компонент отображающий текущее время

Условие

Создайте React‑компонент, который выводит текущую дату‑время и обновляет её каждую секунду. При размонтировании компонента необходимо вызвать функцию logMetric, передав в неё последнее отображённое время.

 function logMetric(date: string) {
  fetch('/api/metric', date);
}

const Clock = () => {
  const [currentDate, setCurrentDate] = useState((new Date()).toISOString());

  return <h1>{currentDate}</h1>;
};

Для реализации понадобится хук useEffect: в нём следует создать таймер, вызывающий setCurrentDate каждую секунду, а в функции очистки вызвать logMetric с текущим значением даты.

Ответ

Интервал обновляет state раз в секунду, а ref хранит последнее committed значение для cleanup. logMetric тоже нужно исправить: второй аргумент fetch должен быть объектом настроек, не строкой.

function logMetric(date) {
  return fetch('/api/metric', {
    method: 'POST', headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ date })
  });
}
function Clock() {
  const [currentDate, setCurrentDate] = useState(() => new Date().toISOString());
  const latest = useRef(currentDate);
  useLayoutEffect(() => { latest.current = currentDate; }, [currentDate]);
  useEffect(() => {
    const timer = setInterval(() => setCurrentDate(new Date().toISOString()), 1000);
    return () => { clearInterval(timer); void logMetric(latest.current).catch(() => {}); };
  }, []);
  return <h1>{currentDate}</h1>;
}

Импортируйте хуки. Для session API нужна предусмотренная backend CSRF-защита. Cleanup также проверочно вызывается в Strict Mode; это не гарантия однократной аналитики. Закрытие вкладки может не выполнить React-cleanup, поэтому надёжную доставку и дедупликацию проектируют отдельно.