Какое сравнение в PureComponent?

В `PureComponent` используется поверхностное сравнение (shallow comparison) props и state — сравниваются значения/ссылки верхнего уровня.

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

PureComponent автоматически реализует shouldComponentUpdate с поверхностным сравнением новых и старых props/state:

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

Перед ре-рендером сравнивает props/state поверхностно, если не изменились, пропускает перерисовку.

Что значит поверхностное

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

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

{ a: 1 } === { a: 1 }; // false — разные ссылки

Следствие — нужна иммутабельность

Мутация объекта без смены ссылки не заметится (та же ссылка):

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

Ловушка — новые ссылки каждый рендер

Инлайн-объекты/функции в props создают новую ссылку каждый рендер → поверхностное сравнение всегда «изменилось» → оптимизация не работает:

<PureChild data={{ x: 1 }} onClick={() => {}} /> // новые ссылки → ре-рендер всегда

Решение — useMemo/useCallback (или стабильные ссылки).

Аналог

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

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

В PureComponent — поверхностное сравнение (shallow) props и state: примитивы по значению, объекты/массивы по ссылке (не по содержимому). Пропускает ре-рендер, если не изменились. Требует иммутабельности (новая ссылка при изменении). Ловушка — инлайн-объекты/функции в props (новые ссылки каждый рендер ломают оптимизацию). Аналог — React.memo.