Хук useState

Подключаем настоящее состояние через useState и заставляем счётчик наконец работать.

useState — хук, который даёт компоненту переменную состояния и функцию для её изменения; смена значения вызывает перерисовку.

Синтаксис

useState возвращает массив из двух элементов: текущее значение и функцию-сеттер. Их сразу деструктурируют:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  //     ↑значение  ↑сеттер        ↑начальное

  return (
    <button onClick={() => setCount(count + 1)}>
      Счёт: {count}
    </button>
  );
}

Разберём по частям:

• useState(0) — создаёт состояние с начальным значением 0 (используется только при первой отрисовке).
• count — текущее значение состояния.
• setCount — функция, которой вы задаёте новое значение.

Теперь клик действительно увеличивает число на экране: setCount сохраняет новое значение и просит React перерисовать компонент.

Имена по соглашению

Сеттер по соглашению называют set + имя состояния: name/setName, isOpen/setIsOpen. Это не требование, но так пишут все, и читать код проще.

Состояние любого типа

В состоянии хранят не только числа — строки, булевы, массивы, объекты:

const [name, setName] = useState("");
const [isOpen, setIsOpen] = useState(false);
const [items, setItems] = useState([]);
const [user, setUser] = useState({ name: "Аня", age: 25 });

Несколько состояний

В одном компоненте можно вызвать useState столько раз, сколько нужно — каждое состояние независимо:

function Form() {
  const [email, setEmail] = useState("");
  const [agree, setAgree] = useState(false);
  // ...
}

Обновление — асинхронно по своей сути

Важный нюанс: после вызова сеттера переменная count в текущем коде не меняется сразу. Новое значение появится только в следующей перерисовке. Это видно так:

function handleClick() {
  setCount(count + 1);
  console.log(count); // выведет СТАРОЕ значение, не новое
}

Причина — «снимок» из прошлого урока: count заморожен на время текущего рендера. React применит новое значение и перерисует компонент, где count уже будет новым.

Итог

• const [value, setValue] = useState(начальное) создаёт состояние и сеттер.
• Сеттер задаёт новое значение и запускает перерисовку; начальное значение — только для первого рендера.
• После сеттера переменная в текущем коде не обновляется — новое значение видно в следующем рендере.