Что такое PureComponent?

`PureComponent` — это класс-компонент React, который автоматически реализует поверхностное сравнение props и state в `shouldComponentUpdate`, предотвращая лишние перерисовки.

Что делает

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

class UserCard extends React.PureComponent {
  render() {
    return <div>{this.props.name}</div>;
  }
}

Поверхностное сравнение

Сравниваются ссылки/значения верхнего уровня:

• Примитивы — по значению.
• Объекты/массивы — по ссылке (не по содержимому).

Поэтому мутация объекта без смены ссылки не будет замечена — нужно обновлять иммутабельно:

// Плохо: PureComponent не заметит
this.state.items.push(x);
// Хорошо: новая ссылка
this.setState({ items: [...this.state.items, x] });

Аналог в функциональных компонентах

React.memo — то же поверхностное сравнение props для функциональных компонентов.

Осторожно

Новые ссылки на каждый рендер (инлайн-объекты, стрелки в props) сводят оптимизацию на нет.

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

PureComponent реализует поверхностное сравнение props/state и пропускает перерисовку, если они не изменились. Работает по ссылкам, поэтому нужна иммутабельность. Функциональный аналог — React.memo. Инлайн-объекты/функции в props ломают оптимизацию.