> Что такое pure component и как создать его на примере функционального компонента в React (React)

Pure Component - это компонент, который выполняет поверхностное сравнение (shallow comparison) своих пропсов и состояния перед повторным рендером. Если значения не изменились, компонент не перерисовывается, что повышает производительность за счёт избегания лишних рендеров.

В функциональных компонентах React аналогом Pure Component является обёртка React.memo. Она принимает компонент и опциональную функцию сравнения пропсов. Пример:

JSX
import React from 'react';

const MyComponent = ({ name, age }) => {
  console.log('Рендер MyComponent');
  return (
    <div>
      <p>Имя: {name}</p>
      <p>Возраст: {age}</p>
    </div>
  );
};

// Оборачиваем в React.memo для поверхностного сравнения пропсов
export default React.memo(MyComponent);

Если нужно кастомное сравнение, передаём вторым аргументом функцию:

JSX
export default React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.name === nextProps.name && prevProps.age === nextProps.age;
});

Важно: React.memo сравнивает только пропсы, не затрагивая состояние или контекст. Используйте его для компонентов, которые часто получают одни и те же пропсы, чтобы избежать ненужных рендеров.