Почему мутация массива через push не вызывает ре-рендер компонента в React?

Почему мутация не вызывает ре-рендер?

В React состояние должно быть неизменяемым (immutable). Когда вы используете хук useState, React хранит ссылку на объект состояния. При вызове функции обновления (например, setState) React сравнивает новое значение с предыдущим с помощью Object.is (аналог ===). Если ссылка не изменилась, React считает, что состояние осталось прежним, и пропускает ре-рендер.

Пример проблемы

const [items, setItems] = useState([1, 2, 3]);

// Неправильно: мутация
items.push(4);
setItems(items); // React не видит изменений, ре-рендера не будет

// Правильно: создание нового массива
setItems([...items, 4]); // Новая ссылка, ре-рендер произойдет

Как это работает под капотом?

React использует алгоритм согласования (reconciliation). Когда вызывается setState, React помечает компонент как требующий обновления. Затем во время рендера он сравнивает предыдущее виртуальное DOM-дерево с новым. Если состояние не изменилось (по ссылке), React пропускает рендер компонента и его дочерних элементов, что повышает производительность.

Вывод

Всегда создавайте новые объекты и массивы при обновлении состояния в React. Используйте спред-оператор, map, filter или библиотеки вроде Immer для удобной работы с иммутабельностью. Это гарантирует корректное обнаружение изменений и предсказуемое поведение интерфейса.