Какие данные можно хранить в useState?

В useState можно хранить любое JavaScript-значение: примитивы, объекты, массивы, Map/Set, даже функции. Важнее понять, что из этого стоит держать в state и как с ним обращаться.

Что хранится без нюансов

const [count, setCount] = useState(0);            // число
const [name, setName] = useState('');             // строка
const [isOpen, setIsOpen] = useState(false);      // булево
const [user, setUser] = useState(null);           // объект или null
const [items, setItems] = useState([]);           // массив

Значения с нюансами

Объекты и массивы — обновлять только иммутабельно (новая ссылка):

setUser({ ...user, age: 30 });
setItems([...items, newItem]);

Функции — ловушка: сеттер интерпретирует функцию как «функциональное обновление», поэтому функцию-значение оборачивают:

const [callback, setCallback] = useState(() => defaultHandler); // инициализация
setCallback(() => newHandler);                                  // обновление

Map/Set — можно, но обновление через создание копии: setTags(new Set(tags).add(tag)).

Что хранить НЕ стоит

• Производные данные (отфильтрованный список, сумма) — вычислять в рендере или useMemo; дублирование в state рассинхронизируется.
• Данные, не влияющие на рендер (id таймера, инстанс сокета) — это useRef.
• Несериализуемые тяжёлые объекты (DOM-узлы, классы с методами) — обычно тоже ref.
• Серверные данные — лучше React Query (кеш), чем ручной state.
• Проп «как начальное значение» — легально (useState(initialValue)), но копия не обновится при смене пропа — частый источник багов.

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

Хранить можно любое значение: примитивы, объекты, массивы, Map/Set, функции (через обёртку () => fn). Правила: объекты — иммутабельно; производные данные не дублировать (вычислять); не влияющее на рендер — в useRef; серверные данные — в React Query.