Коротко и по делу — почему нельзя писать напрямую и как правильно.
Почему это ошибка
- Прямое присваивание `this.state.count = $this.state.count+1$;` мутирует состояние вне механизма React. Последствия:
- React не узнаёт об изменении и не вызовет ререндер => UI не обновится.
- Мутация ломает batching и очереди обновлений — последующие `setState` могут перезаписать или потерять изменения.
- Нарушает контракт иммутабельности: PureComponent/React.memo и сравнения по ссылке перестают работать.
- Трудно отлаживать (time-travel, DevTools), и это несовместимо с Concurrent Mode/React 18.
Какие баги это даёт
- Отсутствие обновления интерфейса.
- Потеря или неожиданный порядок обновлений при батчинге.
- Неправильная оптимизация (компоненты не перерендериваются или рендерятся лишний раз).
- Непредсказуемое поведение в асинхронных/конкурентных сценариях.
Как правильно обновлять состояние
1) Классовые компоненты
- Если новое состояние не зависит от предыдущего (редко):
`this.setState({ count: $this.state.count+1$ });`
Но лучше — использовать функциональную форму, если есть зависимость.
- Если новое состояние зависит от предыдущего (обязательно):
`this.setState(prevState => ({ count: $prevState.count+1$ }));`
- Если нужно выполнить код после обновления:
`this.setState(updater, () => { /* callback после рендера */ });`
2) Функциональные компоненты (Hooks)
- Простое (не зависимое) обновление: `setCount($count+1$);`
- Правильно при зависимости от предыдущего значения:
`setCount(prev => $prev+1$);`
- Для нескольких последовательных инкрементов в одном обработчике:
для $i=0$ до $i<3$ вызывать `setCount(prev => $prev+1$);` — функциональные апдейты корректно накапливаются несмотря на батчинг.
3) Обновление вложенных структур
- Не мутируйте объекты/массивы, создавайте новые копии:
Класс:
`this.setState(prev => ({ nested: { ...prev.nested, value: $prev.nested.value+1$ } }));`
Хук:
`setState(prev => ({ ...prev, nested: { ...prev.nested, value: $prev.nested.value+1$ } }));`
Дополнительные советы
- Не используйте `forceUpdate()` чтобы "исправить" прямую мутацию — это антипаттерн.
- Предпочитайте иммутабельные операции (spread, map, filter) — улучшает предсказуемость и оптимизации.
- Всегда используйте функциональную форму апдейта, когда новое состояние зависит от старого.
Итого: никогда не делайте `this.state.count = ...`. Используйте `this.setState(...)` в классах и сеттер хука в функциональных компонентах; при зависимостях от предыдущего состояния — используйте функцию-апдейтер.