Что такое useState в React?
Что такое useState
useState — один из базовых хуков React, введённых в версии 16.8. До появления хуков локальное состояние было доступно только в классовых компонентах. useState позволяет хранить и обновлять данные внутри функционального компонента.
Синтаксис
const [state, setState] = useState(initialValue);
Функция принимает начальное значение состояния и возвращает кортеж:
state— текущее значение состоянияsetState— функция для обновления состояния
При вызове setState React перерисовывает компонент с новым значением.
Особенности работы
Состояние неизменяемо напрямую. Нельзя писать state = newValue — изменения должны проходить через setState.
Обновления могут быть асинхронными. React группирует несколько вызовов setState в один ре-рендер для оптимизации.
Функциональное обновление. Если новое значение зависит от предыдущего, нужно передавать функцию-updater:
setCount(prev => prev + 1);
Это гарантирует получение актуального предыдущего значения, даже при батчинге.
Начальное значение
Если вычисление начального значения дорогостоящее, можно передать функцию-инициализатор — она вызовется только при первом рендере:
const [value, setValue] = useState(() => computeExpensiveValue());
Обновление объектов и массивов
Состояние в React должно обновляться иммутабельно. При работе с объектами или массивами нужно создавать новые копии:
// Правильно — создаём новый объект
setUser(prev => ({ ...prev, name: 'Иван' }));
// Правильно — создаём новый массив
setItems(prev => [...prev, newItem]);
Когда использовать
useState подходит для:
- локальных данных UI (открыт ли модал, введённый текст, текущая вкладка)
- простых значений, не требующих сложной логики обновления
Для сложной логики состояния лучше рассмотреть useReducer.
Что хочет услышать интервьюер
Кандидат знает, что useState возвращает массив с текущим значением и функцией-сеттером
Понимает, что прямая мутация state запрещена — обновления только через setState
Знает о функциональном обновлении (prev => prev + 1) и когда его применять
Понимает, что каждый вызов useState — это отдельная независимая переменная состояния
Может объяснить разницу между useState и useReducer хотя бы на базовом уровне
Пример: Базовое использование счётчика
import { useState } from 'react';
function Counter() {
// Начальное значение счётчика — 0
const [count, setCount] = useState(0);
const increment = () => {
// Функциональный updater — гарантирует актуальное предыдущее значение
setCount(prev => prev + 1);
};
return (
<div>
<p>Счётчик: {count}</p>
<button onClick={increment}>+1</button>
<button onClick={() => setCount(0)}>Сбросить</button>
</div>
);
}
Пример: Состояние с объектом
import { useState } from 'react';
interface User {
name: string;
age: number;
}
function UserForm() {
const [user, setUser] = useState<User>({ name: '', age: 0 });
const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// Создаём новый объект, не мутируем старый
setUser(prev => ({ ...prev, name: e.target.value }));
};
return (
<div>
<input value={user.name} onChange={handleNameChange} placeholder="Имя" />
<p>Пользователь: {user.name}, возраст: {user.age}</p>
</div>
);
}
Типичные ошибки
Прямая мутация объекта в состоянии (state.field = value) вместо создания нового объекта
Чтение state сразу после вызова setState и ожидание, что значение уже обновилось
Не использовать функциональный updater при обновлениях, зависящих от предыдущего значения
Хранить производные данные в отдельном state вместо вычисления их из существующего
Слишком много useState для связанных данных, которые лучше объединить в один объект
AI-тренажеры
Практика в студии
4.8
