React.PureComponent: автоматическое shouldComponentUpdate

PureComponent — это специальный тип классового компонента в React, который автоматически реализует метод shouldComponentUpdate() с поверхностным сравнением props и state.

Если входные данные (props или state) не изменились, компонент не перерисовывается.

Синтаксис

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    console.log('Рендер!');
    return <div>{this.props.name}</div>;
  }
}

Как это работает?

Внутри PureComponent уже реализован метод:

shouldComponentUpdate(nextProps, nextState) {
  return shallowCompare(this.props, nextProps) || shallowCompare(this.state, nextState);
}

• Сравнение происходит поверхностно (shallow compare)
• Это значит, если вы передадите новый объект/массив, даже с теми же данными — компонент перерисуется
• Но если ссылки не изменились — перерисовки не будет

В чём отличие от Component?

Пример: когда это работает

class Counter extends React.PureComponent {
  render() {
    console.log("Рендер Counter");
    return <div>{this.props.value}</div>;
  }
}

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Counter value={count} />
      <button onClick={() => setCount(0)}>Обновить</button>
    </>
  );
}

Если нажать на кнопку, значение count не изменится — и PureComponent не перерендерится.

Важно помнить

• PureComponent не работает с вложенными объектами или массивами (если вы мутировали их)
• Всегда используйте иммутабельность (spread, map, filter, slice) для корректного сравнения

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

• Если компонент зависит только от props и state без побочных эффектов
• Когда компонент часто перерендеривается с одинаковыми данными
• При работе с классовыми компонентами (в функциональных используйте React.memo)

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

const MyComponent = React.memo((props) => {
  return <div>{props.value}</div>;
});

Вывод

• PureComponent помогает избежать лишних перерисовок в классовых компонентах
• Делает сравнение props и state по ссылке
• Идеален для простых или переиспользуемых компонентов без глубоких объектов