Почему нельзя мутировать состояние напрямую?

Прямая мутация состояния — это изменение значений внутри существующего объекта или массива без создания новой ссылки. В контексте React, Redux и многих других систем управления состоянием это считается антипаттерном, потому что нарушает принцип иммутабельности (неизменяемости данных).

Почему это проблема?

• Нарушение реактивности: React и аналогичные библиотеки полагаются на сравнение ссылок (shallow comparison) для определения, изменилось ли состояние. Если вы мутируете объект на месте, его ссылка остаётся той же, и React «не видит» изменений, что приводит к пропущенным ререндерам.
• Сложность отладки: Когда состояние мутируется в разных частях приложения, становится крайне трудно отследить, где и когда произошло изменение, особенно в асинхронном коде. Это усложняет воспроизведение багов.
• Нарушение работы PureComponent и React.memo: Эти оптимизации зависят от поверхностного сравнения пропсов. Если вы передаёте мутированный объект, сравнение не сработает, и компонент может не обновиться, когда нужно, или обновиться, когда не нужно.
• Проблемы с историей и откатом: В таких библиотеках, как Redux, devtools и middleware (например, redux-thunk) полагаются на то, что каждое состояние — это новый неизменяемый снапшот. Мутация ломает возможность "путешествия во времени" и логирования.

Практический пример

Рассмотрим типичную ошибку при обновлении массива в React-компоненте:

// ❌ ПЛОХО: прямая мутация
const [todos, setTodos] = useState([{ id: 1, text: 'Learn React' }]);
const addTodoBad = (newTodo) => {
  todos.push(newTodo); // Мутация существующего массива!
  setTodos(todos); // Ссылка не изменилась, React может проигнорировать обновление
};

// ✅ ХОРОШО: создание нового массива
const addTodoGood = (newTodo) => {
  setTodos([...todos, newTodo]); // Новый массив, новая ссылка
};

// Пример с объектом
const [user, setUser] = useState({ name: 'Alice', age: 30 });
// ❌ user.age = 31;
// ✅ setUser({ ...user, age: 31 });

Где это применяется?

Принцип неизменяемости состояния является краеугольным камнем не только в React и Redux, но и в библиотеках для глобального состояния (MobX, хотя он использует наблюдаемые объекты, также рекомендует аккуратные мутации), в функциональном программировании, и даже в системах типа Immer, которые предоставляют API для записи мутабельного кода, но под капотом генерируют новые неизменяемые структуры.

Вывод: Избегайте прямой мутации состояния, чтобы обеспечить предсказуемость, упростить отладку и гарантировать корректную работу реактивных систем и их оптимизаций. Всегда создавайте новые объекты или массивы при обновлении.