В чём отличие React.memo и PureComponent?

React.memo и PureComponent решают одну задачу: снизить количество лишних ререндеров. Но применяются они в разных парадигмах и имеют разные «зоны ответственности».

Что именно оптимизируют

Оба инструмента добавляют проверку “нужно ли ререндериться”.

• React.memo(Component)

  • работает только с props

  • применим только к функциональным компонентам

  • по умолчанию делает shallow compare props

• class X extends React.PureComponent

  • сравнивает и props, и state

  • применим только к классовым компонентам

  • также использует shallow compare

Важно: shallow compare означает, что React сравнивает ссылки у объектов/массивов, а не их «внутренности».

Почему это важно на практике

Рассмотрим типичную причину, почему оптимизация “не срабатывает”: каждый рендер создаёт новые ссылки.

const Child = React.memo(({ options }) => {
  // ...
})

function Parent() {
  const options = { mode: 'A' } // новая ссылка на каждый рендер
  return <Child options={options} />
}

Даже если содержимое одинаковое, options всегда новый объект, и React.memo увидит “props изменились”.

Как правильно применять

1. Стабилизировать ссылки (когда это оправдано)

   • useMemo для объектов/массивов

   • useCallback для функций

const options = useMemo(() => ({ mode: 'A' }), [])

2. Выбирать место оптимизации

   • оптимизировать только «дорогие» компоненты

   • не покрывать мемоизацией всё подряд

Кастомное сравнение в React.memo

React.memo позволяет передать свою функцию сравнения:

React.memo(Component, (prev, next) => {
  // true => пропустить ререндер
  return prev.id === next.id
})

Но это инструмент с рисками:

• можно ошибиться и получить устаревший UI

• сравнение может быть дороже самого рендера

Отличия в поведении и ограничениях

1. Область сравнения

   • PureComponent: props + state

   • React.memo: только props (state внутри компонента всё равно триггерит ререндер)

2. Тип компонента

   • PureComponent: классы

   • React.memo: функции

3. Управляемость

   • React.memo проще комбинируется с хуками и современным React

   • PureComponent исторически важен, но новые проекты чаще на функциях

Как это связано с “почему ререндерятся дети”

Если родитель перерендерился, то дети по умолчанию тоже будут вызваны заново.
React.memo / PureComponent позволяют «остановить волну» ререндеров, но только если:

• props действительно не изменились (по shallow compare)

• вы не создаёте новые объекты/функции на каждый рендер без мемоизации

Краткий вывод

React.memo и PureComponent — это один и тот же принцип оптимизации, но для разных типов компонентов. Они эффективны, когда props/state стабильны по ссылкам и когда оптимизация применяется точечно к действительно дорогим компонентам.