Що таке React.PureComponent

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

Якщо вхідні дані (props або state) не змінилися, компонент не рендериться знову.

Синтаксис

tsx

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    console.log('Render!');
    return <div>{this.props.name}</div>;
  }
}

Як це працює?

Усередині PureComponent цей метод вже реалізовано:

tsx

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

Порівняння є поверхневим (shallow compare)
Це означає, що якщо ви передаєте новий об'єкт/масив, навіть з тими ж даними — компонент буде рендеритися знову
Але якщо посилання не змінилися — повторного рендерингу не буде

Яка різниця з Component?

Component	Поведінка
`React.Component`	Завжди рендериться знову, коли змінюються props або state
`React.PureComponent`	Порівнює props та state і може уникнути непотрібного рендерингу

Приклад: коли це працює

jsx

class Counter extends React.PureComponent {
  render() {
    console.log("Render Counter");
    return <div>{this.props.value}</div>;
  }
}

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

  return (
    <>
      <Counter value={count} />
      <button onClick={() => setCount(0)}>Update</button>
    </>
  );
}

Якщо ви натиснете кнопку, значення count не зміниться — і PureComponent не рендериться знову.

Важливо пам'ятати

PureComponent не працює з вкладеними об'єктами або масивами (якщо ви їх змінили)
Завжди використовуйте іммутабельність (spread, map, filter, slice) для коректного порівняння

Обмеження:

PureComponent виконує тільки поверхневе порівняння. Якщо ви зміните внутрішні дані об'єкта без зміни посилання — React не помітить цього.

Коли використовувати?

Якщо компонент залежить тільки від props та state без побічних ефектів
Коли компонент часто рендериться з тими ж даними
Коли працюєте з класовими компонентми (в функціональних використовуйте React.memo)

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

jsx

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

Висновок

PureComponent допомагає уникнути непотрібних повторних рендерів у класових компонентх
Порівнює props та state за посиланням
Ідеально підходить для простих або багаторазових компонентів без глибоких об'єктів

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань