Как подключить состояние в компоненте с помощью useState?

Состояние подключается вызовом useState на верхнем уровне функционального компонента.

Как это делается

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);   // подключили состояние

  return (
    <button onClick={() => setCount(count + 1)}>
      Нажато: {count}
    </button>
  );
};

• Аргумент — начальное значение (используется только при монтировании).
• Возвращается пара [значение, сеттер]; имена — любые, деструктуризация массива.
• Вызов сеттера планирует ререндер, и в новом рендере useState вернёт уже новое значение.

Правила подключения

• Только на верхнем уровне компонента: не в условиях, циклах, вложенных функциях, не после раннего return (React сопоставляет состояние по порядку вызовов).
• Несколько независимых значений — несколько useState, а не один объект «на всё».
• Дорогая инициализация — через функцию: useState(() => parseHugeJson(raw)) (вызовется один раз).

Работа с состоянием

setCount((prev) => prev + 1);            // зависит от предыдущего значения
setUser({ ...user, name: 'Аня' });       // объекты — иммутабельно, новой копией
setItems((prev) => [...prev, newItem]);  // массивы — тоже

Обновления асинхронны и батчатся: в текущем рендере переменная не меняется.

Когда useState не нужен

Производные данные вычислять в рендере/useMemo; значения, не влияющие на UI (таймеры, инстансы), — в useRef; сложное взаимосвязанное состояние — useReducer.

Коротко для собеседования

const [value, setValue] = useState(initial) на верхнем уровне компонента (не в условиях — состояние привязано к порядку вызовов). Сеттер планирует ререндер; для зависимости от прошлого значения — функциональная форма, объекты обновлять иммутабельно, дорогую инициализацию делать ленивой.