Hack Frontend Community

Что такое React.PureComponent

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?

КомпонентПоведение
React.ComponentВсегда перерисовывается при изменении props или state
React.PureComponentСравнивает props и state, и может избежать лишнего рендера

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

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) для корректного сравнения

Ограничение:

PureComponent делает только поверхностное сравнение. Если вы измените внутренности объекта без изменения ссылки — React этого не заметит.

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

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

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

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

Вывод

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