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

Question

React.memo — это обёртка для функционального компонента, которая пропускает ререндер, если props не изменились. PureComponent — базовый класс для классового компонента, который делает то же самое, но ещё сравнивает state. В обоих случаях используется поверхностное сравнение (shallow compare). Если props или state меняются по ссылке, компонент будет считаться изменившимся.

YeaHub · Accepted Answer

React.memo и PureComponent решают одну задачу: снизить количество лишних ререндеров. Но применяются они в разных парадигмах и имеют разные «зоны ответственности».Что именно оптимизируютОба инструмента добавляют проверку “нужно ли ререндериться”.React.memo(Component)работает только с propsприменим только к функциональным компонентампо умолчанию делает shallow compare propsclass 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 изменились”.Как правильно применятьСтабилизировать ссылки (когда это оправдано)useMemo для объектов/массивовuseCallback для функцийconst options = useMemo(() => ({ mode: 'A' }), [])
Выбирать место оптимизацииоптимизировать только «дорогие» компонентыне покрывать мемоизацией всё подрядКастомное сравнение в React.memoReact.memo позволяет передать свою функцию сравнения:React.memo(Component, (prev, next) => {
  // true => пропустить ререндер
  return prev.id === next.id
})
Но это инструмент с рисками:можно ошибиться и получить устаревший UIсравнение может быть дороже самого рендераОтличия в поведении и ограниченияхОбласть сравненияPureComponent: props + stateReact.memo: только props (state внутри компонента всё равно триггерит ререндер)Тип компонентаPureComponent: классыReact.memo: функцииУправляемостьReact.memo проще комбинируется с хуками и современным ReactPureComponent исторически важен, но новые проекты чаще на функцияхКак это связано с “почему ререндерятся дети”Если родитель перерендерился, то дети по умолчанию тоже будут вызваны заново.React.memo / PureComponent позволяют «остановить волну» ререндеров, но только если:props действительно не изменились (по shallow compare)вы не создаёте новые объекты/функции на каждый рендер без мемоизацииКраткий выводReact.memo и PureComponent — это один и тот же принцип оптимизации, но для разных типов компонентов. Они эффективны, когда props/state стабильны по ссылкам и когда оптимизация применяется точечно к действительно дорогим компонентам.