В чем разница между новыми и старыми версиями React

«В чем разница между новыми и старыми версиями React» — вопрос из категории React, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

React 16.8+ (с хуками) и старые версии (до 16.8) отличаются подходом к управлению состоянием и логикой:

  1. Классы vs Функции
    Раньше state и lifecycle-методы были доступны только в классовых компонентах. С хуками функциональные компоненты получили ту же функциональность.

  2. Хуки

// До хуков
class Counter extends React.Component {
  state = { count: 0 };
  increment = () => this.setState({ count: this.state.count + 1 });
}

// С хуками
function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(c => c + 1);
}
  1. Lifecycle-методы
    Вместо componentDidMount, componentDidUpdate используют useEffect.

  2. Оптимизации
    Новые версии предлагают React.memo, useMemo, useCallback для оптимизации рендеринга.

  3. Контекст
    Старый Context API был экспериментальным, новый (useContext) — стабильный и удобный.