Почему классовые компоненты заменили на React Hooks?

Хуки (React 16.8, 2019) появились не ради моды — они решали конкретные проблемы классовой модели, накопленные годами.

Проблема 1: переиспользование логики с состоянием

У классов не было хорошего примитива для шаринга логики. HOC и render props работали, но:

• «обёрточный ад» — десятки слоёв в дереве DevTools;
• конфликты и неявность имён props;
• логику нельзя было композировать линейно.

Хуки сделали логику просто функцией:

const useOnlineStatus = () => {
  const [online, setOnline] = useState(navigator.onLine);
  useEffect(() => {
    const on = () => setOnline(true), off = () => setOnline(false);
    window.addEventListener('online', on);
    window.addEventListener('offline', off);
    return () => { window.removeEventListener('online', on); window.removeEventListener('offline', off); };
  }, []);
  return online;
};
// в любом компоненте: const online = useOnlineStatus();

Проблема 2: размазанная логика жизненного цикла

Один ресурс жил в трёх методах: подписка в componentDidMount, переподписка в componentDidUpdate, отписка в componentWillUnmount, а несвязанные вещи, наоборот, сваливались в один метод. useEffect группирует код по смыслу: подписка и отписка рядом.

Проблема 3: this

Забытый bind, потерянный контекст в колбэках — целый класс багов, не связанных с продуктом. В функциях this нет вовсе.

Проблема 4: классы мешали развитию React

Хуже минифицируются, ломают tree-shaking; модель «this.props всегда актуальны» конфликтует с конкурентным рендерингом (нужны «снимки» на каждый рендер). Все новые фичи (transitions, Server Components, Compiler) проектировались уже под функции.

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

Классы «заменили» хуками из-за: невозможности нормально переиспользовать stateful-логику (HOC-ад → кастомные хуки), размазывания связанного кода по методам жизненного цикла (→ useEffect группирует по смыслу), багов с this и несовместимости классовой модели с конкурентным рендерингом. Классы не удалены, но новая разработка ведётся на хуках.