Какие проблемы может вызвать прямая мутация массива в состоянии (state) вместо иммутабельного обновления?

Проблема прямой мутации состояния

В React состояние (state) должно обновляться иммутабельно, то есть созданием нового объекта или массива, а не изменением существующего. Прямая мутация, например, через push или изменение элемента по индексу, приводит к тому, что ссылка на объект состояния остается прежней. React использует сравнение ссылок (shallow comparison) для определения изменений, поэтому при мутации он не обнаруживает изменений и не запускает повторный рендер компонента.

Последствия

• Компонент не перерисовывается, и пользователь видит устаревшие данные.
• Ломается работа React.memo и PureComponent, которые оптимизируют рендер на основе сравнения пропсов и состояния.
• Хуки, такие как useEffect с зависимостями от состояния, не срабатывают, так как ссылка не изменилась.
• Усложняется отладка и тестирование, так как состояние может быть изменено в нескольких местах без контроля.

Правильный подход

Вместо мутации нужно создавать новый массив. Например, для добавления элемента используйте concat или spread-оператор, для удаления — filter, для обновления — map.

// Неправильно (мутация)
const addItem = (item) => {
  state.push(item);
  setState(state);
};

// Правильно (иммутабельно)
const addItem = (item) => {
  setState([...state, item]);
};

// Обновление элемента
const updateItem = (id, newValue) => {
  setState(state.map(item => item.id === id ? { ...item, ...newValue } : item));
};

// Удаление элемента
const removeItem = (id) => {
  setState(state.filter(item => item.id !== id));
};

Вывод

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