В чем разница функциональных и классовых компонентов в React?

Что проверяют

Понимаете ли вы, что разница не в синтаксисе, а в модели: хуки дали функциям состояние и позволили переиспользовать логику, чего классы не умели.

Как отвечать

Классовый компонент это класс с render и методами жизненного цикла, состояние в this.state, обновление через setState. Функциональный это функция, возвращающая разметку, а состояние и эффекты приходят из хуков.

function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Что реально изменилось:

• переиспользование логики: свой хук вытаскивает поведение целиком. В классах для этого были HOC и render props, отсюда «обёрточный ад»;
• связанный код рядом: подписка и отписка в одном useEffect, а не в componentDidMount и componentWillUnmount в разных концах файла;
• нет this: пропадает целый класс ошибок с потерей контекста и привязкой обработчиков;
• новое доступно только функциям: Suspense-возможности, серверные компоненты и большинство свежих API.

Классы не устарели формально и продолжают работать, но новое пишут функциями. Единственное, чего хуки не умеют напрямую, это границы ошибок: componentDidCatch остаётся классовым.

Где спотыкаются

Говорят «функциональные быстрее». Разница в производительности несущественна, дело в модели.

Считают useEffect заменой componentDidMount один в один, забывая про массив зависимостей и функцию очистки.

Не могут объяснить, зачем нужен свой хук, кроме «чтобы красиво».

Не знают, что границы ошибок до сих пор пишутся классом.