Коротко: напрямую мутировать state — антипаттерн, потому что рушит инвариант иммутабельности React и приводит к трудноотлавливаемым багам (компоненты не обновляются, ломается оптимизация, теряется история состояния). Ниже — почему и как правильно.
Почему это плохо
- Потеря детектирования изменений. Многие оптимизации (React.PureComponent, React.memo, shouldComponentUpdate) и быстрые проверки изменений опираются на поверхностное сравнение ссылок. Если вы делаете
this.state.items.push(x);
this.setState({ items: this.state.items });
— ссылка на массив не меняется, поэтому дети могут не заметить изменение и не перерендериться.
- Непредсказуемость ререндеров и баги. Мутация общего объекта/массива может поменять «предыдущий» state, сломать отладку, time-travel/undo, сравнение в devtools и привести к гонкам при асинхронных обновлениях.
- Нарушение иммутабельности усложняет reasoning и тестирование: копирование состояния вручную даёт меньше гарантии и больше побочных эффектов.
- Хуже для оптимизаций: при иммутабельном подходе проверка «изменилась ли ссылка» — за $O(1)$, тогда как глубокое сравнение структуры — примерно $O(n)$.
Правильные подходы (корректный код)
- Используйте функциональный setState, чтобы не зависеть от устаревшего prev:
this.setState(prev => ({ items: [...prev.items, x] }));
или
this.setState(prev => ({ items: prev.items.concat(x) }));
- Для удаления:
this.setState(prev => ({ items: prev.items.filter(i => i.id !== id) }));
- Для обновления элемента:
this.setState(prev => ({ items: prev.items.map(i => i.id === id ? { ...i, value: newValue } : i) }));
- Для вложенных структур — создавайте новые объекты по пути изменения или применяйте библиотеки:
- immutability-helper (update), или
- immer:
import produce from "immer";
this.setState(prev => produce(prev, draft => { draft.user.name = 'New'; }));
Почему functional setState важен: он гарантирует корректность при последовательных асинхронных обновлениях и избегает проблем со «старым» this.state.
Преимущества иммутабельного подхода
- Детектирование изменений через сравнение ссылок — быстро $O(1)$ при проверке корневых ссылок.
- Совместимость с PureComponent/React.memo и лучшая производительность при ререндере.
- Чистая история состояния — удобно для отладки, undo/redo, тестов.
Итог (рецепт)
- Никогда не мутируйте this.state напрямую (ни push, splice, direct property assignment).
- Всегда возвращайте новый объект/массив при setState; предпочтительно через функциональный setState.
- Для сложных вложенных изменений используйте immutable-паттерны или библиотеки (immer и т.п.).
Если нужно, могу показать несколько компактных примеров «плохо → правильно» для вашего конкретного кейса.