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

Какие параметры есть у Memo?

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

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

Сигнатура

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

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

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

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

Второй параметр — компаратор

const Chart = React.memo(ChartInner, (prevProps, nextProps) => {
  return prevProps.data.revision === nextProps.data.revision;
});

Принимает (prevProps, nextProps) и возвращает boolean:

  • true — props считаются равными, рендер пропускается;
  • false — рендерить заново.

Семантика обратна shouldComponentUpdate, где true означало «рендерить». Компаратор полезен при сравнении по «версии» тяжёлого объекта; глубокое сравнение обычно дороже рендера, а ошибочный true заморозит компонент со старыми данными.

Что помнить

Компаратор вызывается только при рендере родителя — memo не защищает от обновлений собственного state, контекста и подписок на стор. Нестабильные props (инлайн-объекты, стрелки, children) делают мемоизацию бесполезной.

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

Параметра два: компонент и опциональная функция (prevProps, nextProps) => boolean, где true = «равны, не рендерить» (обратно shouldComponentUpdate). Без неё — поверхностное сравнение props через Object.is. От собственного state, контекста и стора memo не спасает.

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