Что такое HOC в React?

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

Сигнатура и пример

const withAuth = (Component) => {
  return function WithAuth(props) {
    const user = useCurrentUser();

    if (!user) return <LoginRedirect />;
    return <Component {...props} user={user} />;
  };
};

const Dashboard = withAuth(DashboardInner);

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

Классические примеры

• connect(mapState, mapDispatch) из react-redux — подключение к стору.
• withRouter из старого React Router — проброс данных роутера.
• React.memo — формально тоже HOC (компонент → мемоизированный компонент).

Правила написания

• Не мутировать исходный компонент — только оборачивать.
• Пробрасывать props: <Component {...props} />.
• Не создавать HOC внутри рендера — каждый вызов даёт новый тип компонента, React будет размонтировать и монтировать его заново.
• Задавать displayName для отладки: WithAuth.displayName = 'withAuth(Dashboard)'.

HOC против хуков

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

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

HOC — функция «компонент → компонент», добавляющая поведение через обёртку (пример — connect из react-redux, React.memo). Сегодня переиспользование логики обычно делают кастомными хуками; HOC уместен, когда нужно управлять самим рендерингом компонента или в легаси.