Какой метод жизненного цикла классового компонента по смыслу аналогичен использованию React.memo?

Связь shouldComponentUpdate и React.memo

В React классовые компоненты имеют метод жизненного цикла shouldComponentUpdate, который вызывается перед рендерингом, когда компонент получает новые пропсы или состояние. Этот метод возвращает true (по умолчанию) или false. Если он возвращает false, рендеринг и последующие методы жизненного цикла пропускаются. Это позволяет оптимизировать производительность, избегая ненужных обновлений.

React.memo — это функция высшего порядка для функциональных компонентов. Она оборачивает компонент и выполняет поверхностное сравнение предыдущих и новых пропсов. Если пропсы не изменились, компонент не перерендеривается. По сути, React.memo автоматически реализует логику shouldComponentUpdate с поверхностным сравнением.

Примеры кода

Классовый компонент с shouldComponentUpdate:

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    // Сравниваем только нужные пропсы
    return nextProps.value !== this.props.value;
  }

  render() {
    return <div>{this.props.value}</div>;
  }
}

Функциональный компонент с React.memo:

const MyComponent = React.memo(({ value }) => {
  return <div>{value}</div>
});
// По умолчанию поверхностное сравнение пропсов

Если нужно кастомное сравнение, React.memo принимает второй аргумент — функцию сравнения:

const MyComponent = React.memo(
  ({ value }) => <div>{value}</div>,
  (prevProps, nextProps) => prevProps.value === nextProps.value
);

Вывод

Используйте shouldComponentUpdate в классовых компонентах и React.memo в функциональных для предотвращения лишних рендеров, когда пропсы редко меняются. Это особенно полезно для компонентов, которые рендерят тяжелые элементы или часто обновляются.