Как работает стратегия Change Detection OnPush в Angular? В каких случаях компонент с OnPush перерисовывается?

Как работает Change Detection OnPush в Angular

Angular использует механизм обнаружения изменений (Change Detection) для синхронизации модели данных с представлением. По умолчанию используется стратегия Default, при которой Angular проверяет все компоненты в дереве при любом изменении данных. Стратегия OnPush (ChangeDetectionStrategy.OnPush) оптимизирует этот процесс, ограничивая проверку только теми компонентами, где действительно могли произойти изменения.

Когда компонент с OnPush перерисовывается?

• Изменение ссылки на @Input: Если родитель передает новое значение через @Input, и это значение изменилось по ссылке (новый объект, массив или примитив). Для объектов и массивов требуется иммутабельность — создание новой копии при изменении.
• События внутри компонента: Любое событие (click, input, submit и т.д.), возникшее в самом компоненте или его дочерних элементах, запускает проверку.
• Асинхронные операции через AsyncPipe: Использование AsyncPipe в шаблоне автоматически запускает проверку при получении нового значения из Observable или Promise.
• Ручной вызов detectChanges(): Вызов метода ChangeDetectorRef.detectChanges() принудительно запускает проверку для компонента и его дочерних элементов.
• Вызов markForCheck(): Метод ChangeDetectorRef.markForCheck() помечает компонент и его предков для проверки при следующем цикле обнаружения изменений.

Пример кода

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `<p>{{ user.name }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserComponent {
  @Input() user: { name: string };

  updateName() {
    // Неправильно: мутация объекта не вызовет проверку
    // this.user.name = 'New Name';

    // Правильно: создаем новый объект
    this.user = { ...this.user, name: 'New Name' };
  }
}

Вывод

Стратегия OnPush рекомендуется для компонентов, которые получают данные через @Input и не зависят от глобального состояния. Она особенно полезна в крупных приложениях для повышения производительности за счет сокращения количества проверок изменений. Используйте иммутабельные данные и AsyncPipe для максимальной эффективности.