Как реализовать мемоизацию в классовых компонентах?

В классовых компонентах мемоизация делается другими инструментами: PureComponent / shouldComponentUpdate вместо React.memo и мемоизация методов/значений вместо useCallback/useMemo.

PureComponent — аналог React.memo

class UserCard extends React.PureComponent {
  render() {
    return <div>{this.props.user.name}</div>;
  }
}

PureComponent автоматически реализует shouldComponentUpdate с поверхностным сравнением props и state: не изменились — рендер пропускается. Те же ловушки, что у memo: новые ссылки (инлайн-объекты/функции) ломают сравнение.

shouldComponentUpdate — ручной контроль

class Chart extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.data.version !== this.props.data.version;
  }
  render() { ... }
}

Вернуть false — пропустить рендер. Полный аналог кастомного компаратора в React.memo (с обратной логикой возврата).

Стабильные ссылки на методы (аналог useCallback)

В классах это бесплатно: метод, объявленный как поле класса, создаётся один раз на инстанс:

class Form extends React.Component {
  handleSubmit = () => { ... }; // стабильная ссылка навсегда

  render() {
    return <Child onSubmit={this.handleSubmit} />; // PureComponent-ребёнок не ломается
  }
}

Ошибка — onSubmit={() => this.submit()} в render: новая функция каждый рендер.

Мемоизация вычислений (аналог useMemo)

Встроенного нет — используют memoize-one или ручной кеш:

filterItems = memoizeOne((items, query) =>
  items.filter((i) => i.name.includes(query)),
);
render() {
  const visible = this.filterItems(this.props.items, this.state.query);
}

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

В классах: PureComponent (авто-поверхностное сравнение) или shouldComponentUpdate (ручное) вместо React.memo; методы-поля класса дают стабильные колбэки без useCallback; для кеша вычислений — memoize-one. Ловушки те же: инлайн-объекты и функции в render ломают сравнение.