Когда вызывается setState, создаётся ли новая ссылка на объект состояния?

Как работает setState в React

Когда вы вызываете setState, React не мутирует текущий объект состояния, а создаёт новый. Это ключевой принцип иммутабельности, который позволяет React эффективно отслеживать изменения и решать, когда нужно перерендерить компонент. setState выполняет поверхностное слияние (shallow merge) переданного объекта с текущим состоянием, после чего ссылка на объект состояния обновляется.

Пример кода

// Исходное состояние
this.state = { count: 0, user: 'Alice' };

// Вызов setState
this.setState({ count: 1 });

// Новое состояние: { count: 1, user: 'Alice' }
// Ссылка на объект состояния изменилась

В этом примере setState создаёт новый объект, копируя существующее свойство user и заменяя count. Старая ссылка на this.state больше не актуальна.

Почему это важно

• React использует сравнение ссылок (reference equality) для определения изменений. Если бы состояние мутировалось, React не смог бы гарантированно обнаружить обновление.
• Иммутабельность упрощает отладку и предсказуемость поведения компонентов.
• Это также позволяет использовать PureComponent и React.memo для оптимизации производительности.

Вывод

setState всегда создаёт новую ссылку на объект состояния, что является фундаментальным требованием для корректной работы React. Применяйте иммутабельные обновления, чтобы избежать багов и обеспечить предсказуемость рендеринга.