Какие проблемы работы с классовыми компонентами встречаются на практике и как их решать?

Работа с классовыми компонентами (обычно — легаси) приносит узнаваемый набор проблем, у каждой есть решение.

Потеря this

Метод, переданный как колбэк, теряет контекст:

<button onClick={this.handleClick}> // this === undefined внутри

Решение: стрелочные поля класса (handleClick = () => {}) или bind в конструкторе. Инлайн-стрелка в render работает, но создаёт новую функцию каждый рендер (ломает PureComponent детей).

Логика размазана по методам

Подписка в componentDidMount, переподписка в componentDidUpdate (с ручным if (prevProps.id !== this.props.id)), отписка в componentWillUnmount. Забыли ветку — утечка или устаревшие данные. Решение: выносить в один метод (syncSubscription()), вызываемый из всех трёх; стратегически — миграция на useEffect.

Бесконечные циклы в componentDidUpdate

setState без сравнения prevProps/prevState → рендер → снова didUpdate. Решение: обязательное условие входа.

Мутации state

this.state.items.push(x) — PureComponent не увидит изменений, поведение непредсказуемо. Только this.setState({ items: [...] }).

setState асинхронен и мерджится

this.setState({ n: this.state.n + 1 }) дважды даст +1. Решение: функциональная форма this.setState((s) => ({ n: s.n + 1 })). Мердж верхнего уровня не глубокий — вложенные объекты копировать вручную.

Переиспользование логики

Только HOC/render props → «обёрточный ад», конфликты имён props. Решение: инкапсулировать логику в хуки и оборачивать класс тонким функциональным компонентом-адаптером.

Стратегия

Не переписывать всё разом: новые компоненты — функциональные; классы мигрируют по мере правок (кроме Error Boundary — там класс остаётся).

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

Проблемы: потеря this (стрелочные поля), логика ресурса размазана по трём методам жизненного цикла (единый sync-метод/миграция на useEffect), циклы в componentDidUpdate без сравнения prevProps, мутации state и асинхронный мерджащий setState (функциональная форма), переиспользование только через HOC. Стратегия — постепенная миграция на хуки.