Почему React перешел на хуки?

Почему React перешел на хуки

Изначально React использовал классовые компоненты как основной способ работы с состоянием и побочными эффектами. Однако в React 16.8 (февраль 2019) была выпущена революционная фишка — Hooks. Это произошло не случайно, а из-за накопленных проблем с классовым подходом.

Основные проблемы классовых компонентов

1. Логика рассеяна между методами

В классовых компонентах одну логику приходится разбивать на несколько методов жизненного цикла:

class UserProfile extends React.Component {
  componentDidMount() {
    // Подписка на данные
    fetchUser(this.props.userId);
    // Подписка на обновления
    subscribeToUser(this.props.userId);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.userId !== this.props.userId) {
      fetchUser(this.props.userId);
      unsubscribeFromUser(prevProps.userId);
      subscribeToUser(this.props.userId);
    }
  }

  componentWillUnmount() {
    // Отписка
    unsubscribeFromUser(this.props.userId);
  }
}

Одна сущность (загрузка пользователя) разбита на три метода. Это усложняет понимание и поддержку кода.

2. Проблема с привязкой this

В классах постоянно нужно думать о контексте this:

class Button extends React.Component {
  handleClick() {
    // this = undefined здесь!
  }

  render() {
    // Нужно явно привязывать
    return <button onClick={this.handleClick.bind(this)} />;
    // Или использовать стрелочную функцию
    return <button onClick={() => this.handleClick()} />;
  }
}

Это источник багов и неудобств.

3. Код-шаринг между компонентами

Чтобы переиспользовать логику из классового компонента, приходилось использовать паттерны как Higher-Order Components (HOC) или Render Props:

// HOC подход — обёртывание компонента
const withMousePosition = (Component) => {
  return class extends React.Component {
    componentDidMount() { /* логика */ }
    render() {
      return <Component {...this.state} />;
    }
  };
};

const MyComponent = withMousePosition(OriginalComponent);

Это приводило к "пирамиде смерти" (wrapper hell) и усложняло отладку.

4. Большие классовые компоненты

Классовые компоненты часто становились большими монолитами, смешивающими несвязанную логику:

class Dashboard extends React.Component {
  // Логика пользователя
  componentDidMount() { /* fetchUser */ }
  // Логика аналитики
  componentDidUpdate() { /* trackEvent */ }
  // Логика уведомлений
  componentDidMount() { /* subscribeToNotifications */ }
  // Логика форм
  // Логика фильтров
  // Логика пагинации
  // ...
}

Как хуки решают эти проблемы

1. Логика сгруппирована вместе

function UserProfile({ userId }) {
  useEffect(() => {
    fetchUser(userId);
    subscribeToUser(userId);

    return () => {
      unsubscribeFromUser(userId);
    };
  }, [userId]);
}

Вся логика в одном месте!

2. Нет проблем с this

Хуки используют обычные функции, не нужно думать о контексте.

3. Простой код-шаринг

// Кастомный хук
function useMousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  useEffect(() => {
    const handleMouseMove = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };
    
    window.addEventListener(mousemove, handleMouseMove);
    return () => window.removeEventListener(mousemove, handleMouseMove);
  }, []);
  
  return position;
}

// Использование
function MyComponent() {
  const position = useMousePosition();
  return <div>{position.x}, {position.y}</div>;
}

Просто функция, которую можно переиспользовать без обёрток.

4. Разделение по концепциям

Можно разбить большой компонент на несколько кастомных хуков по концепциям:

function Dashboard() {
  const user = useUser();
  const notifications = useNotifications();
  const filters = useFilters();
  
  // Компонент остаётся чистым
}

Преимущества хуков

• Переиспользуемость — логика легко экспортируется как хук
• Чистота — разделение concerns, меньше магии
• Читаемость — код читается сверху вниз
• Меньше кода — хуки компактнее классов
• Лучше отладка — стеки вызовов понятнее
• Оптимизация — granular control над обновлениями

Итог

Реact перешел на хуки, потому что классовые компоненты:

• Усложняли организацию кода по логике
• Требовали паттернов (HOC, Render Props) для переиспользования
• Имели когнитивные издержки (this, привязка)
• Плохо масштабировались для больших приложений

Хуки предоставили более функциональный и композабельный способ работы с React, сделав код проще, понятнее и мощнее.