У чому особливість PureComponent?

Повне пояснення

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

Ключові принципи

• shallow comparison: порівнює лише поверхневі властивості об’єктів.
• працює тільки з immutable‑даними або коли зміни не вносяться у внутрішні об’єкти.
• не підходить, якщо props містять функції або об’єкти, що змінюються між рендерами.

Як це працює При виклику setState або оновленні props React викликає shouldComponentUpdate. PureComponent порівнює нові та старі props/ state поверхневим способом; якщо вони однакові, рендер пропускається.

Практика і реалізація

class MyComponent extends React.PureComponent<{text: string}> {
  render() { return <div>{this.props.text}</div>; }
}

Тестування У Jest можна перевірити, що render не виконується при однакових props:

const wrapper = shallow(<MyComponent text="hi" />);
wrapper.setProps({text: "hi"});
expect(wrapper).toHaveRenderedTimes(1);

Особливості в контексті React

• Працює з функціональними компонентами через React.memo.
• Не замінює повністю оптимізацію; для складних дерев потрібні інші патерни (React.PureComponent, shouldComponentUpdate, useMemo).

Оптимізація та типові помилки

• Не використовуйте PureComponent, якщо props містять об’єкти/масиви, що змінюються без створення нових інстанцій.
• Переконайтеся, що state immutable; інакше shallow comparison не виявить зміни.

Диагностика

• Якщо компонент рендериться занадто часто, перевірте, чи props/ state не змінюються без необхідності.
• Якщо компонент не рендериться при очікуваних оновленнях, перевірте, чи використовуються нові об’єкти/масиви.

Альтернативи

• React.memo для функціональних компонентів.
• shouldComponentUpdate вручну для більш складних умов порівняння.