В чем разница между PureComponent и обычным компонентом?

PureComponent — классовый компонент со встроенной оптимизацией: он автоматически пропускает ререндер, если props и state поверхностно не изменились. Обычный Component рендерится при каждом setState/рендере родителя безусловно.

Разница в поведении

class Regular extends React.Component {
  render() { ... } // рендер при КАЖДОМ рендере родителя и каждом setState
}

class Optimized extends React.PureComponent {
  render() { ... } // рендер только если props/state ИЗМЕНИЛИСЬ (поверхностно)
}

Технически PureComponent реализует shouldComponentUpdate с shallow compare: каждое поле props и state сравнивается через Object.is. У обычного Component этот метод по умолчанию всегда возвращает true.

Ловушки поверхностного сравнения

• Новые ссылки ломают оптимизацию: <Pure style={{ m: 8 }} /> или инлайн-стрелка в render — «изменение» на каждом рендере.
• Мутации прячут изменения: this.state.items.push(x) не меняет ссылку — PureComponent не увидит обновления и не отрендерит. PureComponent требует строгой иммутабельности.
• Глубокие изменения (obj.nested.field) поверхностное сравнение не замечает.

Когда использовать

PureComponent — для «листовых» компонентов с простыми props, часто получающих те же значения (строки списков). При сложных случаях — ручной shouldComponentUpdate. Не стоит делать PureComponent всё подряд: сравнение тоже стоит ресурсов.

Современный аналог

Для функциональных компонентов то же самое делает React.memo (по props; state функциональных компонентов и так проверяется через Object.is в сеттере).

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

PureComponent = Component + автоматический shouldComponentUpdate с поверхностным сравнением props и state: пропускает лишние рендеры, но требует иммутабельности (мутации «невидимы») и стабильных ссылок (инлайн-объекты ломают). Функциональный эквивалент — React.memo.