Зачем нужен Should Component Update?

shouldComponentUpdate(nextProps, nextState) — метод классового компонента, позволяющий вручную отменить лишний ререндер: вернул false — React пропустит рендер и обновление DOM для этого поддерева.

Зачем нужен

По умолчанию классовый компонент перерисовывается при каждом setState и при каждом рендере родителя — независимо от того, изменились ли данные. shouldComponentUpdate — точка контроля:

class Chart extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.data.revision !== this.props.data.revision; // false = не рендерить
  }

  render() { /* дорогой рендер */ }
}

Применяется для дорогих компонентов (графики, большие таблицы), где рендер стоит заметно дороже сравнения.

PureComponent — автоматическая версия

React.PureComponent реализует shouldComponentUpdate с поверхностным сравнением props и state. Отсюда его требования: иммутабельность (мутации невидимы) и стабильные ссылки (инлайн-объекты и стрелки в render ломают проверку).

Функциональный аналог

React.memo(Component, arePropsEqual?). Обратите внимание на противоположную семантику возврата: в shouldComponentUpdate true = рендерить, в компараторе memo true = не рендерить.

Осторожно

Неверная логика (забыли сравнить какой-то проп) «замораживает» компонент с устаревшими данными — баг корректности, худший, чем лишний рендер. Поэтому ручное сравнение применяют точечно и по результатам профилирования.

Коротко для собеседования

shouldComponentUpdate позволяет вернуть false и пропустить ререндер классового компонента — ручная оптимизация для дорогих рендеров. Автоматическая версия с поверхностным сравнением — PureComponent, функциональная — React.memo (у него в компараторе true означает «не рендерить»). Ошибка в сравнении даёт застывший UI.