Глава 10. State и useState: когда данные меняются

Зачем эта глава

State — это данные, которые меняются внутри компонента. Без него кнопки, счётчики, формы и фильтры были бы невозможны.

Теория (коротко)

useState возвращает пару: значение и функцию обновления.

Нельзя изменять state напрямую — только через функцию обновления.

JSX

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

Подсказка: если новое значение зависит от старого, используй функцию: setCount(c => c + 1).

Задания

Задание: счётчик

Сделай кнопку «+1».
Сделай кнопку «Сброс».
Добавь отображение значения.

Проверка себя

Ты знаешь, как создавать и менять состояние компонента.

Мини-проект

Цель: переключатель темы.

Требования: состояние «светлая/тёмная» и кнопка переключения.

Критерий готовности: текст кнопки меняется в зависимости от состояния.

Словарь главы

State: Внутренние данные компонента, которые могут меняться.
useState: Хук для работы со state.

← Предыдущая Следующая глава →