Хуки React: useState и useEffect

Хуки — способ «подключить» возможности React к функциональному компоненту. useEffect запускает побочные эффекты: запросы, подписки, синхронизацию с внешним миром.

Зависимости

Массив зависимостей говорит React, когда перезапускать эффект. Пустой массив — один раз после монтирования. Забыли зависимость — получите устаревшее замыкание.

Cleanup

Возвращайте функцию очистки: отмена таймера, отписка от события, abort контроллера fetch.

Дальше

Практика UI: списки и формы.

JavaScript

import { useEffect, useState } from 'react';

function Clock() {
  const [now, setNow] = useState(() => new Date());

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

  return <p>{now.toLocaleTimeString()}</p>;
}

Практическое задание

Задание: сделайте тикающие часы или таймер.

Есть useEffect с cleanup
Зависимости указаны явно
После размонтирования интервал не тикает (проверить в Strict Mode)
Не храните Date в DOM вручную без state