Что такое компонент высшего порядка?

Компонент высшего порядка (Higher-Order Component, HOC) — функция, принимающая компонент и возвращающая новый компонент с расширенным поведением. Название — по аналогии с функциями высшего порядка.

Форма

const withLoading = (Component) => {
  return function WithLoading({ isLoading, ...props }) {
    if (isLoading) return <Spinner />;
    return <Component {...props} />;
  };
};

const UserList = withLoading(UserListInner);
// <UserList isLoading={loading} users={users} />

HOC не меняет исходный компонент — оборачивает: добавляет props, условный рендеринг, подписки, логирование.

Известные примеры

• connect(mapStateToProps) из react-redux;
• React.memo — тоже HOC: принимает компонент, возвращает мемоизированный;
• withTranslation (i18next), withRouter (старый React Router).

Правила и подводные камни

• Пробрасывать props ({...props}) и ref (до React 19 — через forwardRef; в React 19 ref приходит обычным пропом и пробрасывается вместе с {...props}), задавать displayName для отладки.
• Не создавать HOC внутри рендера: результат вызова — новый тип компонента, React будет пересоздавать поддерево каждый рендер.
• Композиция нескольких HOC читается тяжело: withAuth(withTheme(withLogger(Page))) — «обёрточный ад».

HOC сегодня

Хуки закрыли большинство сценариев проще: useAuth() вместо withAuth. HOC остаётся уместным, когда нужно управлять самим рендерингом обёрнутого компонента (подменить его целиком, обернуть провайдером/ErrorBoundary) или добавить поведение чужому компоненту без изменения его кода.

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

HOC — функция «компонент → компонент» для переиспользования поведения через обёртку (connect, React.memo). Правила: пробрасывать props, не создавать в рендере. После хуков используется реже — в основном там, где надо контролировать сам рендеринг или расширять чужие компоненты.