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

Короткий ответ

Pure component - это компонент, который рендерится только при изменении его props или state, выполняя поверхностное сравнение (shallow comparison). В функциональных компонентах React для этого используется React.memo. Он предотвращает лишние ререндеры, если входные данные не изменились, что повышает производительность.

Подробное объяснение

Pure component в React - это компонент, который реализует shouldComponentUpdate с поверхностным сравнением props и state. В классовых компонентах для этого используется React.PureComponent, а в функциональных - React.memo.

React.memo - это higher-order component, который оборачивает функциональный компонент и кеширует результат его рендера. При каждом ререндере родителя React сравнивает новые props с предыдущими с помощью Object.is. Если props не изменились, React использует закешированный результат и пропускает рендер компонента.

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

На практике

React.memo применяется в следующих случаях:

• Компонент часто ререндерится, но его props редко меняются
• Компонент содержит тяжелые вычисления или рендерит много дочерних элементов
• Компонент отображает статические данные, которые не зависят от часто меняющегося state родителя

Не стоит оборачивать каждый компонент в React.memo без необходимости - это добавляет overhead на сравнение props. Используйте его только когда видите проблему производительности или знаете, что компонент будет ререндериться без изменения props.

Пример кода

JSX
import React, { memo } from 'react';

// Обычный функциональный компонент
const UserCard = ({ name, age }) => {
  console.log('Рендер UserCard');
  return (
    <div>
      <h3>{name}</h3>
      <p>Возраст: {age}</p>
    </div>
  );
};

// Pure component с React.memo
const PureUserCard = memo(UserCard);

// Использование в родительском компоненте
const Parent = () => {
  const [count, setCount] = useState(0);
  const user = { name: 'Иван', age: 25 };

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Кликов: {count}
      </button>
      {/* PureUserCard не ререндерится при клике на кнопку */}
      <PureUserCard name={user.name} age={user.age} />
    </div>
  );
};

Как отвечать на собеседовании

Начни с определения pure component и его цели - оптимизация производительности за счет предотвращения лишних ререндеров. Объясни, что в функциональных компонентах используется React.memo. Упомяни, что сравнение поверхностное, и приведи пример, когда это может не сработать (передача новых объектов). Покажи понимание trade-off: React.memo добавляет overhead, поэтому его не стоит применять везде бездумно.

Что проверяет интервьюер

• Понимание механизма ререндера в React
• Знание разницы между обычным компонентом и pure component
• Умение объяснить поверхностное сравнение и его ограничения
• Практический опыт использования React.memo
• Понимание, когда оптимизация нужна, а когда избыточна

Типичные ошибки

• Путать React.memo с useMemo - это разные вещи: memo для компонента, useMemo для значений
• Думать, что React.memo сравнивает глубоко - он делает только поверхностное сравнение
• Оборачивать в memo компоненты с изменяющимися props, что делает оптимизацию бесполезной
• Использовать memo для компонентов с children, которые создаются заново при каждом рендере родителя
• Забывать, что memo не влияет на ререндер из-за изменения собственного state или context