PassFront
  1. PassFront
  2. База знаний
  3. Рендеринг и производительность

Сколько аргументов в React.memo?

Рендеринг и производительность

У React.memo два аргумента: компонент (обязательный) и функция сравнения props (необязательная).

Сигнатура

const MemoizedComponent = React.memo(Component, arePropsEqual?);

Первый аргумент — компонент

Любой компонент (функциональный или классовый), который нужно мемоизировать. React.memo возвращает обёртку: при рендере родителя props сравниваются с прошлыми, и если равны — рендер пропускается, используется прошлый результат.

По умолчанию сравнение поверхностное: каждый проп через Object.is (примитивы по значению, объекты/функции по ссылке).

Второй аргумент — кастомный компаратор

const Chart = React.memo(ChartInner, (prevProps, nextProps) => {
  // true  → props «равны», рендер ПРОПУСТИТЬ
  // false → рендерить заново
  return prevProps.data.revision === nextProps.data.revision;
});

Принимает prevProps и nextProps, возвращает boolean. Внимание на семантику: true = «не рендерить» — противоположно shouldComponentUpdate, где true означало «рендерить».

Когда нужен: сравнение по выбранным полям (глубокие объекты с известным «признаком версии»), намеренное игнорирование части props. Осторожно: ошибочный true «замораживает» компонент с устаревшими данными.

Частые заблуждения

  • Компаратор вызывается только при рендере родителя — от обновлений собственного state/контекста memo не защищает.
  • Глубокое сравнение в компараторе (deepEqual) может стоить дороже самого рендера — обычно признак, что проблема в нестабильных ссылках, а не в memo.

Коротко для собеседования

Два аргумента: компонент и опциональная функция сравнения (prev, next) => boolean, где true = пропустить рендер (обратная семантика shouldComponentUpdate). Без второго аргумента — поверхностное сравнение props по Object.is.

Другие вопросы раздела