> Могли ли функциональные компоненты иметь состояние до появления хуков в React (React)

Короткий ответ

Нет, функциональные компоненты до React 16.8 (хуков) не могли иметь собственного состояния. Они были чисто презентационными и не имели доступа к this.state, this.setState или жизненному циклу. Единственный способ получить состояние в функциональном компоненте до хуков - использовать HOC (например, connect из Redux) или render-props, но это внешнее состояние, не внутреннее.

Подробное объяснение

До появления хуков в React 16.8 (февраль 2019) функциональные компоненты были stateless - они не могли управлять внутренним состоянием. Это было принципиальное ограничение: функциональные компоненты принимали props и возвращали JSX, без доступа к this, setState или lifecycle методам. Разработчики называли их "stateless functional components" (SFC).

Единственный способ добавить состояние в функциональный компонент - использовать паттерны композиции:

• Higher-Order Components (HOC): обёртка, которая передаёт состояние через props. Например, withState из recompose или connect из Redux.
• Render Props: компонент, который передаёт состояние через функцию-ребёнок (children как функция).
• Context API: глобальное состояние, доступное через Consumer.

Но во всех этих случаях состояние хранится не в самом функциональном компоненте, а в родительском класс-компоненте или внешнем хранилище. Функциональный компонент остаётся "глупым" - он только отображает переданные данные.

С появлением хуков (useState, useEffect и т.д.) функциональные компоненты получили возможность иметь собственное внутреннее состояние и побочные эффекты, что сделало класс-компоненты опциональными.

На практике

На собеседовании важно различать:

• Внутреннее состояние (useState, this.state) - то, что управляется самим компонентом.
• Внешнее состояние (Redux, Context, props от HOC) - то, что передаётся извне.

До хуков функциональные компоненты могли работать только с внешним состоянием. Например, компонент, подключённый к Redux через connect, получает state из store как props, но не имеет собственного состояния.

Также стоит упомянуть библиотеку recompose (популярна до хуков), которая предоставляла HOC вроде withState, withReducer, withHandlers. Они позволяли "имитировать" состояние в функциональных компонентах, но технически состояние всё равно хранилось в обёртке-классе.

Пример кода

До хуков (не работает):

JSX
// ❌ Ошибка: функциональный компонент не может иметь состояние
function Counter() {
  const [count, setCount] = 0; // SyntaxError
  return <div>{count}</div>;
}

До хуков (рабочий вариант с HOC):

JSX
import { withState } from 'recompose';

const Counter = withState('count', 'setCount', 0)(
  ({ count, setCount }) => (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  )
);

После хуков:

JSX
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

Как отвечать на собеседовании

Начни с чёткого "нет" - это ключевой факт. Затем объясни разницу между внутренним и внешним состоянием. Упомяни, что до хуков функциональные компоненты назывались stateless functional components (SFC). Приведи примеры обходных путей: HOC (recompose, connect), render props, Context. Подчеркни, что эти паттерны не давали функциональному компоненту собственного состояния - они делегировали его класс-компоненту или внешнему хранилищу. Заверши тем, что хуки решили эту проблему, и теперь функциональные компоненты - основной способ написания React-приложений.

Что проверяет интервьюер

• Понимание эволюции React: знание, что было до хуков и как изменилась архитектура.
• Умение различать внутреннее и внешнее состояние.
• Знание паттернов композиции (HOC, render props) и их ограничений.
• Понимание, что "состояние" в контексте React - это не просто данные, а механизм реактивности (re-render при изменении).
• Способность объяснить технические детали без путаницы.

Типичные ошибки

• Утверждение, что функциональные компоненты могли иметь состояние через this.state (нет, у них нет this).
• Путаница между props (передаются извне) и state (управляются внутри).
• Утверждение, что Redux или Context дают компоненту "собственное состояние" - это внешнее состояние, не внутреннее.
• Игнорирование recompose и других библиотек, которые были популярны до хуков.
• Смешивание понятий "функциональный компонент" и "класс-компонент" при обсуждении lifecycle методов.