Для чего нужны HOC?

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

Идея

HOC оборачивает компонент, добавляя ему поведение (данные, проверки, подписки), не меняя сам компонент.

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

const UserListWithLoading = withLoading(UserList);

Зачем нужны

• Переиспользование логики между компонентами: авторизация, загрузка, логирование, подписка на стор.
• Примеры из библиотек: connect (react-redux), withRouter (React Router до v6, сейчас удалён).

Правила

• Не мутировать входной компонент — возвращать новый.
• Прокидывать неиспользуемые props дальше (...props).
• Копировать статические методы, задавать displayName для отладки.

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

Современный React чаще решает переиспользование логики кастомными хуками — они проще, без «обёрточного ада» и проблем с проксированием props. HOC остаются в legacy и некоторых библиотеках.

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

HOC — функция, принимающая компонент и возвращающая новый с доп. логикой (загрузка, авторизация, подписка на стор). Паттерн переиспользования (connect, withRouter). Не мутирует вход, прокидывает props. Сейчас чаще заменяется кастомными хуками.