Урок 98 · useState и useEffect · Поток JavaScript + React

useState и useEffect

Урок 98 24 минуты Видео + практика с проверкой

useState — это память компонента. Обычная переменная после перерисовки обнуляется, а состояние живёт между рендерами: меняешь его — React сам перерисовывает то, что от него зависит.

useEffect — это побочные действия: запрос к серверу, подписка, работа с документом. Массив зависимостей в конце говорит, когда эффект должен повториться.

// состояние живёт между рендерами
const [count, setCount] = useState(0);

// эффект перезапускается, когда меняется count
useEffect(() => {
  document.title = `Кликов: ${count}`;
}, [count]);

return <button onClick={() => setCount(count + 1)}>+1</button>;

Нажатие вызывает setCount → React перерисовывает компонент с новым значением → срабатывает эффект и меняет заголовок вкладки.

Что проверить перед сдачей

Состояние не мутируется напрямую (count++ — нельзя), массив зависимостей заполнен осознанно, а в консоли нет предупреждений React.

★ Домашнее задание ещё не сдано

Компонент-таймер на хуках

Сделай таймер: кнопки «старт», «пауза», «сброс». Секунды хранишь в useState, интервал заводишь в useEffect и обязательно чистишь при размонтировании. Залей на GitHub и пришли ссылку — куратор проверит и пришлёт фидбек.

⏳ Дедлайн недели — суббота, 23:59 МСК. Успей, чтобы не потерять жизнь.